CODEWITHSUNDEEP
csscss-selectors
goncalotomas
goncalotomas

Reputation: 1000

Apply CSS rule to multiple elements within a sub-class

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.

Upvotes: 3

Views: 1087

Answers (3)

Vucko
Vucko

Reputation: 20834

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

Upvotes: 2

David Wilkinson
David Wilkinson

Reputation: 5118

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.

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 3

Related Questions