Menu
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>
The output is:
asdasdasdasd <- red
sdfsdfs <- blue.
However, what I am thinking is that the 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. Therefore, both lines should be displayed as blue text, but I am apparently wrong.
Please point out my mistake. Thank you very much.
995
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/
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
