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>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.