I need help with a specific pseudo-class selector issue.
Even with !important, the text in the li:first-child element is not appearing in blue.
The selector specificity for p is: (0, 0, 1)
The selector specificity for li:first-child is: (0, 1, 1)
I want the text "xyz" to be blue, but it is currently red. I have tried commenting out the CSS for p (red color).
https://i.sstatic.net/paE3p.png
p {
color: red;
}
li:first-child {
color: blue !important;
list-style: none;
}<p>abc</p>
<aside>
<ul>
<li>
<p>xyz</p>
</li>
</ul>
</aside>After reviewing the solution, the updated code looks good:
<html lang="en">
<head>
<title>Test</title>
<style>
p {
color: red;
}
li:first-child p {
color: blue;
list-style: none;
}
</style>
</head>
<body>
<p>abc</p>
<ul>
<li><p>xyz</p></li>
</ul>
</body>
</html>