Preview URLs

• /en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators

(comment last updated: 2024-06-19 06:32:42)

In this case, we should have gone with option 2, "The page on Child combinator should mention what would happen if selector1 is absent." The universal selector is implied, and would not be added by a CSS developer in these cases, so should not be added in these examples. Instead, we should teach people that the universal selector is implied.

@estelle I tried a simple example to verify if the universal selector is implied. It doesn't seem to work. Please check it out here - https://codepen.io/lalaniArman/pen/JjqpJzG
Am I missing anything?

@estelle: I don't think relative selectors are valid in complex selector lists. They are only valid inside :has. This was what I fixed a while ago in #34045

The universal selector is implied, and would not be added by a CSS developer in these cases, so should not be added in these examples. Instead, we should teach people that the universal selector is implied.

@estelle If you workout the grammar from <combinator> you'll find that * > p is a complex-selector and > p is a relative-selector and they are not the same. Relative selector works only in certain contexts like :has(>p).

If you put following code in https://jigsaw.w3.org/css-validator/#validate_by_input+with_options it says >p is invalid:

* > p {
  font-size: 1rem;
}

:has(> p) {
  font-size: 2rem;
}

> p {
  font-size: 3em;
}