Question

This is the HTML:

<div id='testBlue'>     <span>hello</span>     <span id='testGreen' class='testGreen'>hello2</span> </div> 

If I have set in CSS:

#testBlue span { color:Blue; }     .testGreen, #testGreen { color:Green; } 

How can I override the general style in the second SPAN?

I have tried both id and class selectors but it doesnt override it.

Answer 1

In CSS, selectors with higher specificity override selectors that are more general.

In your example you defined a style for a span inside a div with id = ‘testBlue’. This selector is more specific than the simple selector for the class or id testGreen, so it wins. You just need a selector more specific than #testBlue span, that is not difficult to find:

#testBlue span.testGreen {     color: green; }