4

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Yonatan Galili
  • 208
  • 1
  • 9
  • 9
    Nothing is being overridden because you're targeting two different elements. This isn't related to specificity. – Josh Crozier Jan 25 '16 at 19:17
  • Thanks, But aren't the letters in the tag also inside the p #abc? – Yonatan Galili Jan 25 '16 at 19:20
  • 2
    Yes but strong has `color:red`, it does not have `color:inherit` – pablito.aven Jan 25 '16 at 19:21
  • 5
    `strong` supersedes `#abc` because the `#abc` style is only *inherited* for the contents of ``. Yes, `#abc` is *more specific* in terms of naming but when rendering `` it is only inherited (less specific than a direct style rule). If it was a `` then absolutely, you would be correct and the text would be blue. – Draco18s no longer trusts SE Jan 25 '16 at 19:23

1 Answers1

2

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>
cocoa
  • 3,806
  • 7
  • 29
  • 56