@ericsalvi
Posted
Hey Foued,
If you are talking about the !important tag you have on the visibility CSS for the class, .is-invalid-text then you'll want to adjust the CSS Specificity so that it has a higher value.
Currently the CSS for .is-invalid-text has a value of 010 but your hidden CSS for .section2 .card .error-text has a value of 030. So the goal is to make the .is-invalid-text to be just one value higher than the currently hidden error text. So 031 or 040 would be suitable.
I use https://specificity.keegan.st/ and paste in my different selectors to see what the values are for each. And the most simple resolution would be to just change the .is-invalid-text to .section2 .card .error-text.is-invalid-text. This value is now 040 if you do that.
Let me know if that is what you were needing and keep up the momentum!
@Foued80
Posted
Hi Ericsalvi , Thank you for the code review, i fixed all the !important by adding id to the card and used this to get higher specificity
<form method="get" action="/" novalidate>
<input
type="text"
id="fname"
placeholder="First Name"
autocomplete="given-name"
/>
<div class="error-text">First Name cannot be empty</div>
.section2 .card .error-text {
color: hsl(0, 100%, 74%);
text-align: right;
font-style: italic;
font-size: 0.7rem;
margin-top: -0.5rem;
visibility: hidden;
}
#myCard .is-invalid-text {
visibility: visible;
}```
javascript add the class .is-invalid-text to the div to show it.
