Search code examples
htmlcsssasswysihtml5

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?

Solution

  • 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
}