CSS triple descendant selectors

Question

I've a doubt on descendant selectors...

.classA .classB .classC{
    background-color: #000;
}

This applies the background to all the classC elements, child (direct or indirect) of classB elements, where classB element is a child (direct or indirect) of a classA element. This doesn't apply a background to classC elements child of classA elements, but non-child of classB elements. Is this right?

.classA > .classB .classC{
    background-color: #000;
}

Thiss applies the background to all the classC elements, child (direct or indirect) off all classB elements, where classB element is a DIRECT (non indirect) child of a class A element.

Is everything right?

> checks the immediate children, so the latter rule applies to .classC elements which are indirect or direct descendants of .classB which are children (immediate) of .classA — Andrew Li, Jul 03 '16 at 17:49

score 2 · Answer 1 · edited May 23 '17 at 11:52

Everything you have said is right, except substitute "descendant" for "child". A "direct child" is a tautology; a child is an immediate descendant by definition. Conversely, in the selector E > F > G, G is a descendant of E, but not its child; it is its grandchild.

It's why > is known as simply the child combinator, or alternatively the direct descendant combinator, but not the "direct child" combinator.

See also: What does the ">" (greater-than sign) CSS selector mean? (particularly the footnote of my answer there)

CSS triple descendant selectors

1 Answers1