CODEWITHSUNDEEP
csscss-selectorscss-specificity
Yonatan Galili
Yonatan Galili

Reputation: 218

How does a strong selector override an id selector? Isn't an id selector considered more specific?

in the following snippet, how come the strong selector overrides the id selector? Isn't an id selector considered more specific, thus having priority? 

<!doctype html>
<html>
  <head>
  <title>Sample document</title>
  <style>
      strong{color:red;}
      #abc {color:blue;}
  </style>
  </head>
  <body>
    <p id="abc">
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

Upvotes: 4

Views: 524

Answers (1)

cocoa
cocoa

Reputation: 3921

You are correct with specificity, but selectors only work with the direct content of the element. So the text color is different for the strong elements because it is nested deeper and the p selector isn't able to change the color for those elements. So if you did want to change the strong elements for #abc you would do it like this

strong { color: red; }

#abc strong {  color: blue; }

and if you wanted strong tags text to be the same as the p text then you would do this

#abc, #abc strong { color: red; }


strong { color: red; }
#abc strong {  color: blue; }
#def, #def strong { color: red; }
<p id="abc">
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>
<p id="def">
  <strong>ABC</strong>
DEF
</p>

Upvotes: 2

Related Questions