CODEWITHSUNDEEP
htmlcsscss-specificity
Puzzi22
Puzzi22

Reputation: 31

Two CSS declarations with same specificity have a strange behaviour

I have those two CSS declarations. Both have the same specificity - I even checked on a Specificity Calculator to be sure that they are equal. In that case the last declaration found in the CSS should be applied to the element, so the color of the list items should be green. For a reason that I cannot comprehend, in this case, they appear in red. Also quite inexplicably, the list bullets appear in green. Even if I had the "!important" rule to the "green" declaration it won't work.

li:first-line { color: red; } 
ul li { color: green; }
<ul>
  <li>Go Out The House</li>
  <li>Get In Your Car</li>
  <li>Start Driving</li>
</ul>

Upvotes: 1

Views: 219

Answers (2)

karim_mo
karim_mo

Reputation: 147

Here is the solution

<html>
<head>
<style>
ul::first-line { color: red; } 
ul li { color: green; }
</style>
</head>
<body>

<ul>
  <li>Go Out The House</li>
  <li>Get In Your Car</li>
  <li>Start Driving</li>
</ul>

</body>
</html>

The problem is that you applied the styling to the

  • element which is not correct because the
  • element doesn't have a first line as it is all only one line, thus you should apply to element because it has multiple lines, thus is has a first line as a prat of it. Hope that helped.

    Upvotes: 0

    • PsiKai
    PsiKai

    Reputation: 1978

    The main reason why it doesn't work is because you selecting the first line of the li which are each 1 line, hence they get applied to all. If you switch the first-line to ul it will work as you expected. The specificity is working as expected because of this. Any additional lines in the li would be green. That's why the bullets are green.

    ul:first-line { color: red; }
ul li { color: green; }
    <ul>
  <li>Go Out The House</li>
  <li>Get In Your Car</li>
  <li>Start Driving</li>
</ul>

    Upvotes: 1

    Related Questions