The Specificity Of First-line And First-child In Css?

I have the following html code:

Solution 1:

The :first-line selector applies directly to the first line, while the :first-child selector is inherited from the element that it applies to.

A style that applies directly to the item takes precedence over inherited styles.

You can make the selector for the element more specific, by for example adding elements, id and class selectors, but it still can't take precedence over the style applied to the first line. Demo: http://jsfiddle.net/Guffa/3H4Ab/

Solution 2:

I think when you use <br>, sdfsdfs goes to a new line so it won't be the first line, but it will still be the first child of body tag and it will be blue. Also as you specified the color of the first line it will be red, as obvious. (Just trying to reason)

Solution 3:

I just read that

In CSS 3, you need to differentiate pseudo-elements from pseudo-classes by using a double colon (::) at the beginning of the element.

on http://css-tricks.com/specifics-on-css-specificity/

Solution 4:

p tag is the first child of body. first-child is a pseudo-class, which has a specificity of 10 and first-line is a pseudo-element, which has a specificity of 1.

Well, no. first-line is inheriting the style and adds 1 pseudo-element inside the pseudo-class(10 1), so it's absolutely normal.

Share