The order of a descendant combinator CSS definition

Question

This must be a very simple question for HTML ninjas out there, but I feel I'm missing something obvious here. Here is a snippet:

#red span {
  color: red;
}

#green span {
  color: green;
}

<div id="red">
  <p><span>red</span></p>
  <div id="green">
    <p><span>green</span></p>
  </div>
</div>

If I swap the stylesheet order, all of the text becomes red:

#green span {
  color: green;
}

#red span {
  color: red;
}

<div id="red">
  <p><span>red</span></p>
  <div id="green">
    <p><span>green</span></p>
  </div>
</div>

This happens despite the fact that <div id="green"> is a more inner parent of <span>green</span> than <div id="red"> in the DOM tree. I suppose it doesn't take precedence simple because its CSS now appears first in the order of stylesheets. So the order of stylesheets is what matters here.

Is this an expected behavior? Is this implementation/browser specific? Is there some official specs detailing that?

Finally, is there any CSS selector syntax I can use to make it work as in the first snippet, without relying on the order of stylesheets or adding new class names, ids, etc?

Answer 1

You can use > selector to make it apply to only specific span inside the div with the id you give and not all the span inside the div

#green > span {
  color: green;
}

 span {
  color: red;
}

<div id="red">
  <p><span>red</span></p>
  <div id="green">
    <span>green</span>
  </div>
</div>

Answer 2

Yes, the result you got is absolutely expected—well, maybe not expected, but they are correct. Here are the official specs. And here’s a tweet poll of mine detailing the exact same problem. (Spoiler: the majority of voters got it wrong.) Read the replies for a more in-depth discussion.

Currently, there’s not any CSS technology that takes “closest parent” scope into account. And this is a common misconception a lot of programmers have. (CSS is not a programming language.) A typical programmer will think, “The selector #red span means wherever I see a #red, look for a span inside, and then apply the styles. Since #green span is inside the #red, the green will apply after the red.” This is simply incorrect.

The way CSS actually applies styles is that it looks at each element, then goes through the stylesheets from top to bottom, decides if it matches, and then applies/overrides styles as it goes. That’s just one aspect of the cascade, among others (such as inheritance and specificity). Since in your second example #red span comes last in the CSS source, it gets applied last, overriding #green span, regardless of “how close” the span is within the #red in the DOM.

To fix your specific problem, the easiest thing to do is use a direct child selector, like #red > p > span and #green > p > span. But as you’d suspect, these selectors would have to be updated if you ever change the HTML. Coupling your CSS and HTML is a hassle, especially as your project grows.

The best strategy is not to depend on the DOM to style your elements. What happens when you move the span outside the #red? Would you want it to keep its style? For maintainable and scalable CSS, you should use classes only (not IDs) and apply the class to the actual element you want styled, without depending on DOM structure or parent-child relationships. That way, when your HTML structure changes, you don’t have to adjust your CSS to match.

Example:

.red {
  color: red;
}
.green {
  color: green;
}

<div>
  <p><span class="red">red</span></p>
  <div>
    <p><span class="green">green</span></p>
  </div>
</div>

Answer 3

If you want to do it to all descendants, you can achieve it by Javascript like following, it decreases many line of codes if you want to apply many colors, but will be slower time than css. It's up to your preferences

var colors = ['red', 'green', 'blue', 'orange', 'brown']
var spans = document.querySelectorAll('span');

spans.forEach(function(spanElement) {
  colors.forEach(function(color){
   if(spanElement.closest(`#${color}`)){
     spanElement.style.color=color
   }      
  }) 
})

<div id="red">
  <span>red</span>
  <div id="green">
    <span>green</span>
    <p><span>green</span></p>
  </div>
  <div id="blue">
    <span>blue</span>   
  </div>
  <div id="orange">
    <span>orange</span>   
  </div>
  <div id="brown">
    <span>brown</span>   
  </div>
</div>