Asked  6 Months ago    Answers:  5   Viewed   29 times

I want to apply a CSS rule to any element whose one of the classes matches specified prefix.

E.g. I want a rule that will apply to div that has class that starts with status- (A and C, but not B in following snippet):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

Some sort of combination of:
div[class|=status] and div[class~=status-]

Is it doable under CSS 2.1? Is it doable under any CSS spec?

Note: I do know I can use jQuery to emulate that.

 Answers

81

It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):

div[class^="status-"], div[class*=" status-"]

Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:

  • [class^="status-"] — starts with "status-"

  • [class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).

Naturally, this also works in jQuery, as demonstrated here.

The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.

If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.

Tuesday, June 1, 2021
 
Niels
answered 6 Months ago
84

No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Explanations and illustrations for the workaround are given here and here.

Tuesday, June 1, 2021
 
oroshnivskyy
answered 6 Months ago
96

With section:not([class]) you select every section without the class attribute. Unfortunately, it won't select those sections with an empty class attribute value. So in addition, we have to exclude these sections:

section:not([class]) { /* every section without class - but won't select Section C */
  color: red;
}

section[class=""] { /* selects only Section C */
  font-weight: bold;
}
<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>

Further reading

  • CSS attribute selector, browser support
  • :not
Friday, June 18, 2021
 
RemiX
answered 6 Months ago
67

CSS works down the DOM (although selectors are processed backwards), so you can't navigate up an element tree and then back down to reach an element's cousin. You can only either operate on the same level of elements (only going forward), or go down.

You'll have to go with your jQuery solution.

Saturday, July 31, 2021
 
akosch
answered 4 Months ago
38

Your question isn't quite clear; there are several ways to get the last .hr element from your example, but you say "DOM structure could be more complicated." In order to answer your question, you need to mention what possible DOM structures you could have; in some it might be possible, in some it will not be.

Here is one way to get the .hr out of the last div:

div div:last-of-type .hr

Here's another way to get the .hr out of the last child of the outer div:

div :last-child .hr

If you need to get the last .hr element out of the document, regardless of what it's inside, then you can't do that in CSS. In CSS, you can only select the first, last, or nth element at one particular level of the hierarchy, you can't select the last element of some type regardless of what it's nested in.

Sunday, August 1, 2021
 
Yigang Wu
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share