Pseudo-class inheritance understanding

Question

I thought that pseudo-classes inherited properties from their parent element, but in practice it seems the parent element specifically selects all its pseudo-classes, even if they're not specified.

Eg, given the HTML:

<a href="#" id="id-selector">ok</a>

and CSS:

#id-selector {
  color: green;
}

a:any-link {
  color: red;
}

I thought that color: green would only be inherited by the pseudo-class any-link, and thus be overriden by the a:any-link selector since this is a specific selector for the pseudo-class, and specific selectors override inherited properties even if they have a lower specificity. But the output of the above is a green link, indicating that #id-selector is specifically targeting any-link, not it being inherited.

An example of a specific selector with a lower specificity overriding an inherited property with a higher specificity:

HTML -

<div id="id-has-high-specificity">
    <h1 class="class-has-low-specificity">Heading</h1>
</div>

CSS -

.class-has-low-specificity {
  color: green;
}

#id-has-high-specificity {
  color: red !important;
}

here the output is green, which is expected, since the heading is only inheriting from the second rule, but is being specifically selected by the first rule.

I thought this same thing applied to pseudo-classes, in that pseudo-classes inherited from their parent element. But it seems from my first example that they don't, and that rather the parent element specifically selects all its pseudo-classes, even if they're not specified.

Is it the case then that pseudo-classes don't inherit any properties from their parent element, but instead the parent element specifically sets all of its pseudo-classes whenever a rule for it is defined, even if those pseudo-classes aren't specified?

Could you put a working snippet into your question so we can see the problem for ourselves? — A Haworth, Jun 13 '21 at 05:49
Hi @AHaworth actually this is the only code. I'm trying to learn CSS from the ground up via first principles, and just want a full understanding how pseudo-class inheritance works — user4779, Jun 13 '21 at 05:51
Could you describe then what :any-link would be in CSS? If you want to select on the attribute href being present but with any link the syntax is a[href], not a pseudo class - so there must be some other pseudo class you are thinking of? — A Haworth, Jun 13 '21 at 06:02
the :any-link would refer to the "ok" content in-between the two tags. Actually the same thing should occur from my understanding if we make the selectors #id-selector[href] and a[href]:any-link, the former selector is still gaining priority for all pseudo-classes. I'm using any-link specifically just for illustration, in reality I'd be making use of a pseudo-class such as :visited, for example — user4779, Jun 13 '21 at 06:10

A Haworth · Accepted Answer · 2021-06-13T09:52:03.567

1

CSS ascertains which selector(s) 'win(s)' following a set of order of precedence rules.

For example, from MDN:

Selector Types The following list of selector types increases by specificity:

Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).

ID selectors (e.g., #example).

So in the example given in the question:

<a href="#" id="id-selector">ok</a>
and CSS:

#id-selector {
  color: green;
}

a:any-link {
  color: red;
}

The color does not turn to red because the id selector takes precedence, even though the setting for a comes after in the 'cascade'.

Here's a snippet where the color does change (for this example on a hover):

#id-selector {
  color: green;
}

a#id-selector:hover {
  color: lime;
}

a:hover {
  color: red;
}
</style>

<a href="#" id="id-selector">ok</a>

UPDATE From comments I'm wondering if there is some confusion about pseudo elements (and classes) - they are 'part of' the one element, they are not a child of a 'parent' element.

This snippet has a parent/child and in that case the specificity as assumed in the question works:

#id-selector {
  color: green;
}

a:hover {
  color: red;
}

<div id="id-selector"><a href="#">ok</a></div>

edited Jun 13 '21 at 09:52

answered Jun 13 '21 at 06:54

A Haworth

30,908
4
11
14

I appreciate this answer immensely, but I'm aware of how specificity rules work, as evidenced by the second part of my question. My understanding is that an inherited property is always overriden by a specific selector, regardless of the specificity of either. My understanding is also that "psuedo-classes" inherit from a parent element. But if they inherit, then surely a specific selector for a pseudo-class must override anything inherited? Specificity plays no role here, unless if inheritance in fact doesn't occur. And this is my question. Does inheritance occur with a pseudo-class, or not? – user4779 Jun 13 '21 at 09:36
I'm lost as to why you are lost! Looking through the rules as stated in MDN, the a selector has less specificity than the : hover selector which has less specifity than the id selector. I'm wondering if there's some confusion about pseudo elements and classes - they aren't 'creating' another element, they are part of the one element. I've put another snippet up to demonstrate when you do actually have a 'parent'. – A Haworth Jun 13 '21 at 09:52
@A Haworth Thank you. Your update does answer my question. Does this also apply to pseudo-elements, or are pseudo-elements considered children of the parent element, unlike pseudo-classes? – user4779 Jun 13 '21 at 09:57
Yes it applies to pseudo elements, actually they have even less weight than pseudo classes if you look at the list from MDN. – A Haworth Jun 13 '21 at 10:00
@A Haworth This is where my understanding is beginning to break down. Is this answer not saying the opposite? https://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements I'm honestly utterly confused at this point. Since a type selector is a "simple selector", no different to a universal selector other than having a lower specificity from my understanding. Are not many people heavily implying that pseudo-classes/elements are in fact inheriting from a parent element? – user4779 Jun 13 '21 at 10:05
1

We are in danger of trying to talk about pseudo elements and pseudo classses at the same time. Your question was about pseudo classes initially. Are you happy with them now (as there is no question of thinking about a separate 'element' - they are just classes with a lower weight than an id). If you can wrap this question up it might be helpful to ask another one, with an example, about pseudo elements. I'm offline now for several hours but will look again later to see what you decide. – A Haworth Jun 13 '21 at 10:36

Pseudo-class inheritance understanding

1 Answers1