Nesting CSS Classes in Html

Question

I need something for a dynamic project, and what I want is to make a class that every header element takes some properties, the children can be or not be direct descendants, however, inside that class can be another class that must overwrite the first class properties... I want those classes to be nested like 3-4 times.... is there a way to do this, to not take too much css space?

.something1 h1{
  color: green;
}

.something2 h1{
  color: red;
}

<div class='something1'>
  <div>
  <h1>Green</h1>
  </div>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <div><div>
      <h1>Green</h1>
      </div></div>
      <div class='something2'>
        <div>
        <h1>Red</h1>
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/eauwr8zo/1/

Sumit patel · Accepted Answer · 2017-03-07 09:15:49Z

1

Using with > in css

.something1 > h1{
  color: green ;
}

.something2 > h1{
  color: red;
}

<div class='something1'>
  <h1>Green</h1>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <h1>Green</h1>
      <div class='something2'>
        <h1>Red</h1>
      </div>
    </div>
  </div>
</div>

Using with !important; in css

.something1 > h1{
  color: green !important;
}

.something2 h1{
  color: red;
}

<div class='something1'>
  <h1>Green</h1>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <h1>Green</h1>
      <div class='something2'>
        <h1>Red</h1>
      </div>
    </div>
  </div>
</div>

answered Mar 7, 2017 at 9:15

Sumit patel

3,91111 gold badges38 silver badges65 bronze badges

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

Comments

Serge Inácio · Accepted Answer · 2017-03-07 09:18:59Z

0

Add the ">" simbol to .something1 > h1 and .something2 > h1, like this it will only affect its direct child:

.something1 > h1{
  color: green;
}

.something2 > h1{
  color: red;
}

<div class='something1'>
  <h1>Green</h1>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <h1>Green</h1>
      <div class='something2'>
        <h1>Red</h1>
      </div>
    </div>
  </div>
</div>

answered Mar 7, 2017 at 9:18

Serge Inácio

1,3809 silver badges29 bronze badges

Comments

pol · Accepted Answer · 2017-03-07 09:42:42Z

0

Use the direct descendant combinator >.

.something1 h1 {
  color: green;
}

.something2 > div > h1, .something2 > h1 {
  color: red;
}

<div class='something1'>
  <div>
  <h1>Green</h1>
  </div>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <div><div>
      <h1>Green</h1>
      </div></div>
      <div class='something2'>
        <div>
        <h1>Red</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Or if can't find a combination to use > that suits your random html,
then you can add a new selector by being even more specific by adding the same class multiple times.

.something1 h1,
.something1 .something1 h1{
  color: green;
}

.something2 h1,
.something2 .something2 h1 {
  color: red;
}

<div class='something1'>
  <div>
  <h1>Green</h1>
  </div>
  <div class='something2'>
    <h1>Red</h1>
    <div class='something1'>
      <div><div>
      <h1>Green</h1>
      </div></div>
      <div class='something2'>
        <div>
        <h1>Red</h1>
        </div>
      </div>
    </div>
  </div>
</div>

edited Mar 7, 2017 at 9:42

answered Mar 7, 2017 at 9:16

pol

2,70112 silver badges16 bronze badges

3 Comments

Brada Over a year ago

Thanks, I updated my question, the children is not necessary to be direct descendants

pol Over a year ago

@Brada You can find a combination to use > that works for you, or add the same class multiple times. jsfiddle.net/eauwr8zo/2

Brada Over a year ago

Yes, i know, but I need to update the classes with PHP and in the end the resulting file may be some big....

Collectives™ on Stack Overflow

Nesting CSS Classes in Html

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related