Why is a difference between inline CSS and normal CSS

Question

I did just want to answer a question and I fall on something I dont understand! Why the result is not the same if I use inline CSS or CSS in a file like the color in this case!

The code is the same but the 1st paragraph is green and the 2nd red!

I really dont understand why?

Thank you

<head>
 <style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
</head>
<body>

<p>This a paragraph.</p>

</body>

p:first-child{
color: red;
}
p:not(a){
 color: green;
}

<body>

<p>This a paragraph.</p>

</body>

In the first example the HTML isn't valid. The `style` tags should be in the `head`. — Vucko, Apr 13 '16 at 22:03
What is `p:not(a)`? `p` cannot be `a`, and it's neither a class nor id. — Stickers, Apr 13 '16 at 22:06
If you look at the node tree in dev tools, in your first example the style tag is moved within the body tag meaning that `p` is no longer the first child — Turnip, Apr 13 '16 at 22:06
or more accurately, the `body` tags are being stripped from you code. — Turnip, Apr 13 '16 at 22:08
This example was just used in a question minutes ago: http://stackoverflow.com/questions/36610048/specificity-between-not-and-first-child-selectors and it was answered. — EoghanTadhg, Apr 13 '16 at 22:10
Technically what you're showing here is more like in-file CSS, in-line generally refers to where you include a style attribute on the HTML element itself. e.g. `
` (And is generally frowned upon, as it's messy and hard to maintain) — DBS, Apr 13 '16 at 22:10
Thanks to all of you because of you I learned something today — CodeWeis, Apr 13 '16 at 22:18

wero · Accepted Answer · 2016-04-13T22:12:22.790

1

If you copy your first snippet into a file and open it in a browser the paragraph is indeed red as in the second example.

But for some strange reason* if you run the first snippet in stackoverflow the style element is moved into the body element before the p element (just introspect with firebug). Now p is not the first child and therefore the red-color rule does not apply.

*EDIT: or not that strange (see comment by Turnip) since the body tag is stripped from the script.

edited Apr 13 '16 at 22:12

answered Apr 13 '16 at 22:07

wero

32,544
3
59
84

Oh yes in FIDDLE it is the same thank you I really was surprised when I saw that – CodeWeis Apr 13 '16 at 22:11

score 1 · Answer 2 · answered Apr 13 '16 at 22:08

p:first-child will only render on the first child if it is a p tag. For whatever reason, the StackOverflow snippet is rendering the code as:

  <head>
    <style>
    </style>
    <style type="text/css"></style></head>
  <body>
    <style>
      p:first-child{
        color: red;
      }
      p:not(a){
        color: green;
      }
    </style>
    <p>This a paragraph.</p>
  </body>
</html>

The first child is the <style> tag, which got moved into the body. Because of this, there is no p:first-child and so the color red never renders, this leaves green as the only style applied to the <p> tag.

score 1 · Answer 3 · edited May 23 '17 at 12:24

While there is an exception for the :not() pseudoclass in the CSS Specificity Rules that determine when specific CSS styles are applied to certain elements, the real issue here is a matter of invalid markup.

The first example that you provided is actually invalid as <style> blocks must be declared within the <head> element according to the spec, and you'll notice when this is corrected the results should be the same:

Doh! Or it's just a matter of Stack Overflow's editor stripping out the <body> tags within the code examples per the comment from Turnip.

Why is a difference between inline CSS and normal CSS

3 Answers3