[SOLVED] CSS Specificity – Conflicts between CSS selectors

Issue

This Content is from Stack Overflow. Question asked by Jeffrey

I am having a question regarding the following pseudo-class selector.

Even with !important, the text under this li:first-child is not showing blue.

p has Selector Specificity: (0, 0, 1)
li:first-child has Selector Specificity: (0, 1, 1)

I am expecting the xyz to be blue but it is red.

Unless comment out CSS for p (red color).

enter image description here

<html lang="en">
  <head>
    <title>Test</title>
    <style>
      p {
        color: red;
      }
      li:first-child {
        color: blue !important;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <p>abc</p>
    <aside>
      <ul>
        <li>
          <p>xyz</p>
        </li>
      </ul>
    </aside>
  </body>
</html>



Solution

The li:first-child makes the color of the <li> blue, but the <p> is still red.

li:first-child selects the li that is a first child, not the first child of the li.


This Question was asked in StackOverflow by Jeffrey and Answered by ray hatfield It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?