Databases
StackOverflow2013
Postsdbo
POHow create CSS Selector which selects the Xn tag including descendants
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow create CSS Selector which selects the Xn tag including descendants
    primarykey
    data
    text
    <p>Say I have the following DOM tree:</p> <pre><code>&lt;div class="box"&gt; &lt;ul class="gallery"&gt; &lt;li id="1"&gt;text&lt;/li&gt; &lt;li id="2"&gt;text&lt;/li&gt; &lt;li id="3"&gt;text&lt;/li&gt; &lt;li id="4"&gt;text&lt;/li&gt; &lt;li id="5"&gt;text&lt;/li&gt; &lt;li id="6"&gt;text&lt;/li&gt; &lt;li id="7"&gt;text&lt;/li&gt; &lt;li id="8"&gt;text&lt;/li&gt; &lt;li id="9"&gt;text&lt;/li&gt; &lt;/ul&gt; &lt;div id="random"&gt;&lt;/div&gt; &lt;ul class="gallery"&gt; &lt;li id="10"&gt;text&lt;/li&gt; &lt;li id="11"&gt;text&lt;/li&gt; &lt;li id="12"&gt;text&lt;/li&gt; &lt;li id="13"&gt;text&lt;/li&gt; &lt;li id="14"&gt;text&lt;/li&gt; &lt;li id="15"&gt;text&lt;/li&gt; &lt;li id="16"&gt;text&lt;/li&gt; &lt;li id="17"&gt;text&lt;/li&gt; &lt;li id="18"&gt;text&lt;/li&gt; &lt;li id="19"&gt;text&lt;/li&gt; &lt;li id="20"&gt;text&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I want to create a CSS selector that will pick every 6th <code>&lt;li&gt;</code> tag under the div with the class "box". But I need the selector to take into account the entire <code>&lt;li&gt;</code> tags in the page and not to count them per <code>&lt;ul&gt;</code> tag. So in the end, the selector should pick the <code>&lt;li&gt;</code> with IDs 6,12,18. Currently I was only able to create a selector that picks IDs 6 &amp; 15 when I used:</p> <pre><code>div.box li:nth-of-type(6n) </code></pre> <ul> <li><strong>Notice 1:</strong> the IDs numbers are only added for reference. In reality the <code>&lt;li&gt;</code> tags don't have a class or an ID. </li> <li><strong>Notice 2:</strong> the number of <code>&lt;li&gt;</code> tags in each <code>&lt;ul&gt;</code> tag varies from site section to site section. Sometimes there can be even a 3rd and a 4th <code>&lt;/ul&gt;</code> with more <code>&lt;li&gt;</code> tags.</li> <li><strong>Notice 3:</strong> I don't have control over the hard-coded HTML, which means I cannot unify tags, add IDs or CSS classes, etc. The selector will be called from an external JS file. While I can edit the DOM with jQuery after the page loads, I prefer to avoid such a solution to make the selector easier to handle.</li> </ul> <p>Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRoy Peleg
    1. USRoy Peleg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow create CSS Selector which selects the Xn tag including descendants
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow create CSS Selector which selects the Xn tag including descendants
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow create CSS Selector which selects the Xn tag including descendants
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWill the number of `<li>` elements be fixed, or will they be dynamic?
      singulars
      1. POHow create CSS Selector which selects the Xn tag including descendants
      1. USDre
    2. CO#6,#12,#18,#24...
      singulars
      1. POHow create CSS Selector which selects the Xn tag including descendants
      1. USJAL
    3. COThey will be dynamic, I only added them for reference and to clarify the question. I'll add a notice.
      singulars
      1. POHow create CSS Selector which selects the Xn tag including descendants
      1. USRoy Peleg
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload