Nested CSS Classes – Child class to override parent class?

Question

The goal is to have an element's parent dictate it’s style. So .dark .light p would have light text, .dark p would have dark text, and .light .dark .light p would have light text.

The p element might not even be a direct child of .dark or .light so .light .dark div.wrap div.inner p would have dark text.

Because of the cascading nature of CSS, it seems to prefer the last rule. Is this even possible?

/* Doesn't work - switching the order isn't helpful
   as the opposite problem occurs */

.dark p {
  color: #000;
}
.light p {
  color: #aaa;
}
/* Works, but in my use case I need to specify attributes on 
   specific element. */

/* 
.dark {
  color: #000;
}

.light {
  color: #aaa;
} 
*/

/*  Works but not realistic if paragraph is nested deeper */

/*
.dark > p {
  color: #000;
}

.light > p {
  color: #aaa;
}
*/

/* Only works on the first two levels */

/* 
.dark p {
  color: #000;
}

.light p {
  color: #aaa;
}

.dark .light p {
  color: #aaa;
} 

.light .dark p {
  color: #000;
} 
*/

<div class="light">
  <p>Light text</p>
  <div class="dark">
    <p>Dark text</p>
    <div class="light">
      <p>Light text</p>
    </div>
  </div>
</div>

<div class="dark">
  <p>Dark text</p>
  <div class="light">
    <p>Light text</p>
    <div class="dark">
      <p>Dark text</p>
    </div>
  </div>
</div>

http://codepen.io/acondiff/pen/KaaqxP

Answer 1

I approached this problem by setting up the HTML a bit differently. This gives enough flexibility for two levels.

.light { color: black; background:lightgrey;}
.dark {color: grey; background: black;}
div.light {color: black}

<section class="dark">
 <p>Lighttext</p>
 <div class="light">
   <p>Dark text</p>
 </div>
</section>

Answer 2

Consider giving the same color to all text elements.

Then overriding the color for either light or dark.

body {
  color: red;
}
.light > p {
  color: blue;
}

<div class="light">
  <p>Light text</p>
  <div class="dark">
    <p>Dark text</p>
    <div class="light">
      <p>Light text</p>
    </div>
  </div>
</div>

<div class="dark">
  <p>Dark text</p>
  <div class="light">
    <p>Light text</p>
    <div class="dark">
      <p>Dark text</p>
    </div>
  </div>
</div>

Answer 3

CSS follows the flow of the css document, therefore if .dark comes after .light in the CSS file, any element in your html with both classes will always display the .dark style.

.light {
  background: #ccc;
  }
.dark {
  background: #999;
  }

<p class="dark light">This will be dark  as it comes after light in the css file.</p>

!important

You can override the .dark styles by putting !important on your .light styles.

.light {
  background: #eee !important;
  }
.dark {
  background: #999;
  }

<p class="light dark">This will be light as the light styles has !important</p>

Alternatively you can apply the light styles to all elements and just override the elements you need to:

p {
  background: #eee;
}
.dark {
  background: #999;
}

<p>this will be light</p>

<p class="dark">this will be dark</p>

Answer 4

Try this :

.dark > p {
            color:#000;
         }


.light > p {
            color:#aaa;
         }

Full code :

.dark > p {
 color:#000;
}
   
.light > p {
 color:#aaa;
}

<div class="light">
  <p>Light text</p>
  <div class="dark">
    <p>Dark text</p>
    <div class="light">
      <p>Light text</p>
    </div>
  </div>
</div>

<div class="dark">
  <p>Dark text</p>
  <div class="light">
    <p>Light text</p>
    <div class="dark">
      <p>Dark text</p>
    </div>
  </div>
</div>

Answer 5

The following code will work by covering the nesting nature of the code.

.dark p {
    color: #000;
}
.light p {
    color: #aaa;
}

.dark .light>p{
    color:#aaa;
}
.light .dark>p{
    color: #000;
}