Nested CSS Classes – Child class to override parent class?

[Historical Forums User]

Consider the following: http://codepen.io/acondiff/pen/KaaqxP

The goal is to have an elements 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 passible?

[derjan]

Hi,

using color: inherit on the <p> should do the trick.

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

.dark p,
.light p {
  color: inherit;
}

[Author]

Posts