Geek Answers Handbook

The specifics of the first line and first child in CSS?

I have the following html code:

<!DOCTYPE html> <html> <head> <style> :first-line { color: red; } :first-child { color: blue; } </style> </head> <body> <p>asdasdasdsad<br>sdfsdfs</p> </body> </html>

Output:

asdasdasdasd <- red

sdfsdfs <- blue.

However, I think the p tag is the first child of the body. first-child is a pseudo-class that has a specificity of 10, and first-line is a pseudo-element that has a specificity of 1. Therefore, both lines should appear as blue text, but I'm apparently mistaken.

Please indicate my mistake. Thank you very much.

+4
html css
source share
4 answers

The :first-line selector is applied directly to the first line, while the :first-child selector is inherited from the element to which it refers.

A style that applies directly to an element takes precedence over inherited styles.

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

+4
source share

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

0
source share
Tag

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

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

0
source share

I just read that

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

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

0
source share

More articles:


All Articles