Patrick Zawadzki Patrick Zawadzki - 1 month ago 11
Sass (Sass) Question

Working CSS does not apply to element when using different selectors?

I am working on fixing an issue I am seeing with a

textarea
and
wysihtml
.

Currently I have something like this

<textarea class="wysihtml wysi-fix" required></textarea>


I have some CSS that looks like this

.wysi-fix{
//some css here
}


The .wysi-fix CSS works on the textarea, however if I change the textarea to...

<textarea class="wysihtml" required></textarea>


and I change the CSS to

.wysihtml[required]{
//the css goes here
}


The CSS no longer works, even though both selectors are selecting the same element on the HTML page. If it helps, I am using SASS instead of vanilla CSS. Any idea as to what is going on?

Answer

According to MDN, your attribute selector should work.

Possibly you have to use [required="required"] as attribute selector with a markup like <textarea class="wysihtml" required="required"></textarea>:

.wysihtml[required="required"]{
  //the css goes here
}

But a better way would be to use the :required pseudo class:

.wysihtml:required{
  //the css goes here
}