Apply CSS rule to multiple elements within a sub-class

Question

I have the following markup:

<div class="class-XXX">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>

For simplicity, lets assume that class-XXX can only have the values class-1, class-2, class-3 and class-4.
I want to apply the rule color: #fff; to every child of class-5 that is not a child of class-1. Here that part of my stylesheet:

.class-2 .class-5,
.class-3 .class-5,
.class-4 .class-5 {
  color: #fff;
}

This is not working and I'm not really sure why. I don't believe that the rule is being overridden either.

UPDATE

As AndrewBone pointed out, the rule appears to work in a minimal example. I now understand what is wrong, but I don't know how to fix it:

There is a rule being applied to h1 in another CSS file (can't be removed) and that rule is being given higher priority than the rule I was writing. How can I fix this?

Here is an example JSFiddle.

SOLUTION

Vucko pointed out that the h1 type selector has higher priority and so the rule will not be applied. So, in order to avoid listing all possible combinations one should use the * selector!

End result:

.class-2 .class-5 *,
.class-3 .class-5 *,
.class-4 .class-5 *{
  color: #fff;
}

My thanks to Paulie_D and David Wilkinson for teaching me about the :not pseudo-selector.

jsfiddle.net/link2twenty/xxt2hytg is this not the desired result? — Andrew Bone
– Andrew Bone, Commented Jan 8, 2016 at 12:16
You could also use:not selector but it is a tricky selector. Is the div with .class-xxx a direct child of body? Or does it have any wrapper around it? Note: Your selector should work depending on properties (for example, color should not have a problem because children will inherit it from parent), the :not will help you achieve it with lesser code. — Harry
– Harry, Commented Jan 8, 2016 at 12:18
@AndrewBone yes, so it would seem my rule is well formed. However, I cannot achieve my desired result. I will update the post with more information. — goncalotomas
– goncalotomas, Commented Jan 8, 2016 at 12:55

Paulie_D · Accepted Answer · 2016-01-08 12:24:11Z

3

This would do it..

  [class^="class-"]:not(.class-1) .class-5 {
          */ your styles here */
        }

...but this only works for a specific methodolody in classnames as above.

[class^="class-"]:not(.class-1) .class-5 {

  color: red;

}

<div class="class-1">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-2">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-3">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-4">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-5">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>

answered Jan 8, 2016 at 12:24

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harry Over a year ago

Haven't checked but if there is a higher level wrapper with class-0 then it will apply to all the elements because class-0 is of the required format and class-5 will be a descendant.

goncalotomas Over a year ago

Do you mind explaining what the part [class^="class"] does?

Paulie_D Over a year ago

It's an attribute selector for classes that start with "class-"

Vucko · Accepted Answer · 2016-01-08 13:19:06Z

2

If you have some container for those divs, you can then use the :not selector (as Harry mentioned in the comment):

.main :not(.class-1) .class-5 {
  color: red;
}

<div class="main">
  <div class="class-1">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>1</h1>
    </div>
  </div>
  <div class="class-2">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>2</h1>
    </div>
  </div>
  <div class="class-3">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>3</h1>
    </div>
  </div>
  <div class="class-4">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>4</h1>
    </div>
  </div>
  <div class="class-5">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>5</h1>
    </div>
  </div>
</div>

.main :not(.class-1) .class-5 {
  color: red;
}

JSFiddle

edited Jan 8, 2016 at 13:19

answered Jan 8, 2016 at 12:23

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

5 Comments

Vucko Over a year ago

The styles for h1 override those other styles. Here's more about CSS selector specificity (MDN).

goncalotomas Over a year ago

I want to apply this rule to h1, h2, ... , p, etc.. Would this be a good excuse to use !important or is there a cleaner way than listing all possible combinations?

goncalotomas Over a year ago

Wow. I didn't knew you could use * as a wildcard in CSS. Very well played Vucko!

Vucko Over a year ago

Be careful when using *, it can cause a lot of problems :) Also, check this CSS Specificity Calculator. And also, :not has good browser support (gte IE9).

goncalotomas Over a year ago

I believe it fits in this example. Thank you very much for your help! :)

David Wilkinson · Accepted Answer · 2016-01-08 12:25:59Z

2

This does the trick: https://jsfiddle.net/023rox1k/

CSS:

.wrapper :not(.class-1) .class-5 {
  color: blue;
}

HTML:

<div class="wrapper">
  <div class="class-1">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-2">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-3">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-4">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
</div>

The :not selector is quite powerful and obviously targets elements not of a certain class in this case.

answered Jan 8, 2016 at 12:25

David Wilkinson

5,1281 gold badge21 silver badges32 bronze badges

3 Comments

goncalotomas Over a year ago

Very elegant solution. But what about performance? Does :not (or pseudo-selectors in general) have performance overheads?

David Wilkinson Over a year ago

I'm not sure about :not specifically, but here's a good resource on CSS overheads and performance: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

goncalotomas Over a year ago

Thanks for the link! Very useful! :)

Collectives™ on Stack Overflow

Apply CSS rule to multiple elements within a sub-class

3 Answers 3

3 Comments

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related