How to create a CSS Selector that selects an Xn tag, including descendants

Question

Let's say I have the following DOM tree:

<div class="box">
<ul class="gallery">
    <li id="1">text</li>
    <li id="2">text</li>
    <li id="3">text</li>
    <li id="4">text</li>
    <li id="5">text</li>
    <li id="6">text</li>
    <li id="7">text</li>
    <li id="8">text</li>
    <li id="9">text</li>
</ul>
<div id="random"></div>
<ul class="gallery">
    <li id="10">text</li>
    <li id="11">text</li>
    <li id="12">text</li>
    <li id="13">text</li>
    <li id="14">text</li>
    <li id="15">text</li>
    <li id="16">text</li>
    <li id="17">text</li>
    <li id="18">text</li>
    <li id="19">text</li>
    <li id="20">text</li>
</ul>
</div>

I want to create a CSS selector that will select every 6th tag <li>under a div with a class field. But I need the selector to take into account whole tags <li>on the page and not take them into account in the tag <ul>. Therefore, at the end, the selector must choose <li>with identifiers 6,12,18. Currently, I was able to create a selector that selects identifiers 6 and 15 when I used:

div.box li:nth-of-type(6n)

• Note 1: ID numbers are added for reference only. In reality, tags <li>do not have a class or identifier.
• 2: <li> <ul> . </ul> <li>.
• 3: HTML, , , CSS .. JS . DOM jQuery , , .

Answer 1

, , ...

Sych Fabrício, CSS. , , html.

, .

?

, , , , CSS:

• ul, .box, .gallery.
• (, , ) li ( , , ).

html , , ( color, ):

ul.gallery:nth-of-type(2n+1) li:nth-of-type(6n) {
    color: red;
}

ul.gallery:nth-of-type(2n+2) li:nth-of-type(6n+3) {
    color: red;
}

, , , , , html , , , , .gallery , ( , 6 , .gallery 7 ).

, , html , , css . ( , # 1 # 2 ), css .

Answer 2

nth-child nth-of-type .

, CSS-, li . 6- JavaScript.

, CSS n- : . , .

, . nth-child , , , , , DOM . , , "scoped" nth selectors a la CSS Counters. .

Answer 3

CSS , " DOM". .

jQuery, , , , ": nth-from-top (n)", JQuery DOM.

Note that this type of selector will be much slower because it cannot take advantage of the performance improvements provided by the built-in DOM methods.