CSS attribute selectors not selecting

I have a question but do not know if there is an answer as no-one seems to know.

I am trying to use CSS selectors …

I have several divs on a web page who’s class name ends with -modal and I select them using CSS selector

div[class$="-modal"] { CSS Properties ... }

and this works a treat. I also have three divs that end with -window (.one-window, .two-window etc ) and I try to select them with

div[class$="-window"] { CSS Properties ... }

I get nothing. If I style them using the conventional

.one-window, .two-window { CSS Properties ... }

this works fine.

Any Ideas?


CSS3 Selectors - 6.3.2. Substring matching attribute selectors


Represents an element with the att attribute whose value ends with the suffix “val”. If “val” is the empty string then the selector does not represent anything.

Therefore *-window has to be the last class appearing in the attribute in order for it to be selected.

<div class="foo bar one-window">...</div>

The above HTML would be selected because the attribute ends with *-window - (example).

div[class$="-window"] {
  /* .. */

<div class="one-window foo bar">text..</div>

Whereas the above wouldn’t be selected - (example)

div[class$="-window"] {
  /* .. */

Possible solutions would be to re-order the class attribute values to ensure that *-window appears at the end. Alternatively, you could use the following attribute selector in order to select attributes that contain at least one occurrence of the value -window. (example) .. this assumes that no other classes contain the substring -window. Highly uncommon but still probable.

div[class*="-window"] {