If I correctly understood the method of work of child selectors, then what is written on the link below does not work.

The style applies to all descendants, although, judging by the description, it should apply only to children, not grandchildren or great-grandchildren.

A source

Here is an example:

table.special td>h1 { color: red; } 
 <table class="special"> <tr> <td><h1>Test Selector 1</h1> <table> <tr> <td> <h1>Test Selector 2</h1> </td> </tr> </table> </td> </tr> </table>

3 answers 3

No, you got it wrong.
Consider this example:

 <section class="container"> <div class="child level-1"> Потомок 1-го уровня <div class="child level-2">Потомок 2-го уровня</div> </div> </section> /* Случай А */ .container > .child { color: red; } /* Случай Б */ .container .child { color: red; }

In case A, the rule is assigned to the descendant of the first level and is inherited by the descendant of the 2nd.
In case B, the rule is assigned to descendants of all levels.

More accurate explanations:

In the first case, to change the descendant styles of the second level, it’s enough just to refer to it by a unique selector to overwrite the styles, because it does not fit into the target sample, and its own default selector has a weight of 0.

 .container > .child { color: red; } .level-2 { color: blue; } 
 <section class="container"> <div class="child level-1"> Потомок 1-го уровня <div class="child level-2">Потомок 2-го уровня</div> </div> </section>

In the second case, in order to change the descendant styles of the second level, you will have to assign a selector whose weight is not less than that of the previous rule, since the element falls into the target sample.

 .container .child { color: red; text-decoration: underline; } /* Так не сработает */ .level-2 { color: blue; } 
 <section class="container"> <div class="child level-1"> Потомок 1-го уровня <div class="child level-2">Потомок 2-го уровня</div> </div> </section>

To make the second case work, increase the weight of the selector.

 .container .child { color: red; } /* Вес селектора не меньше, чем в предыдущем правиле */ .container .level-2 { color: blue; } 
 <section class="container"> <div class="child level-1"> Потомок 1-го уровня <div class="child level-2">Потомок 2-го уровня</div> </div> </section>

    Everything works in accordance with the documentation. In your rule, all descendants of td are selected (including "grandchildren" and "great-grandchildren") tables with the special class, and now they have only direct ones.

    You can check on the rule table.special>tr>td>h1 {...}

    • Judging from the description, only children should be chosen, not their grandchildren and great-grandchildren. "(child). To indicate that the style rule applies only to the immediate descendant, the character ">" is used in the selector. - Yuri Svetlov
    • one
      Read the documentation and the written rule more carefully: you select the special table, then select all descendants of td , including those in the child table for the special table. And only now all the selected td are looking for direct descendants of h1 . - alenkins
    • I understand you, thank you. But note what is written from the above link. Quote: In some cases, we are not interested in all the "descendants" of a certain structural element, but only the immediate ones - not "grandchildren" or "great-grandchildren", but only "children" (child). To indicate that the style rule applies only to the immediate descendant, the character ">" is used in the selector. And in fact, in my rule, as you wrote, all descendants of td are selected (including "grandchildren" and "great-grandchildren"). That is, what is written there is not true in the above link? - Yuri Svetlov
    • one
      If you had table.special>tr>td>h1 {...} , then only td from the special table would be selected, and you have a table.special between table.special and td , do you understand what it means? - alenkins
    • one
      yes, in the paragraph about the child selectors there is a crazy example - alenkins

    In your example, both inscriptions were painted red, because both fall under the concept of "subsidiaries" i. h1 is the daughter of td. Either everything works for you, or nothing works if the old browser (ie8 for example)

    • one
      Judging from the description, only children should be chosen, not their grandchildren and great-grandchildren. "(child). To indicate that the style rule applies only to the immediate descendant, the character ">" is used in the selector. - Yuri Svetlov