'CSS descendant selector - anchor element in beginning of descendant list breaks styling

I'm trying to apply styling for only the p and a elements that are a descendant of any element with class "some-class". Per https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list, the code below should provide the expected behavior. However, the styling is unexpectedly being applied to all the p elements. Interestingly, I am able to get the correct behavior if I reorder the list of descendants, i.e. .some-class p,a. Can someone explain why this might be?

FYI - I've run the code in both Firefox and Chrome with the same results.

<html>
<head>
<style>
.some-class a,p {
     color: red;
}
</style>
</head>
<body>

<div>
    <p>should not be red</p>
</div>

<div class="some-class">
    <p>should be red</p>
</div>

</body>
</html>
cssselectordescendant


Solution 1:[1]

You select all a-elements that are inside elements with a classname of some-class, then you select all p-elements. You must specify that you also want to select all p-elements that are inside elements with a classname of some-class, like this:

.some-class a,
.some-class p {
   color: red;
}

And a more modern way of doing the same:

.some-class :is(a,p) {
   color: red;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rehnoj

Related Questions