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?


solution

CSS3 Selectors - 6.3.2. Substring matching attribute selectors

[att$=val]

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"] {
  color:red;
}