Pseudo-Element Style Priority

Question

I played with pseudo-element styles and came across behavior that puzzled me

Consider the following css and html

HTML:

<p> Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons ::. </p> 

and styles

 p::first-letter { font-size: 20px; color: red; } p::first-line { font-variant: small-caps; color: green; } p::before { content: 'Start'; color: blue; } 

In Chrome, the behavior is as follows: The first letter :: before the content is colored red, even if its contents in p and :: before the styles do not overwrite the color in blue.

Also, when there is no letter in :: before the content, and I put and / * there - the entire first line turns green and does not have :: first-letter and :: before styles.

In Firefox, the result of providing the code is as follows:

I am using the latest browser under Ubuntu 17.04

So can anyone explain why: before the content is selected by other pseudo-element selectors, and styles are applied there, and why the proper :: do not overwrite them before the styles, even if they are “later” styles.

Answer 1

As for the first line and the first letter, this is not a specificity problem. It is simply stated like this:

As with the contents of regular elements, the generated contents of :: before and: after pseudo-elements can be included in any :: pseudo-elements of the first line and :: first letters applied to its original element.

( source )