Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'm not enirely sure <strong>which</strong> one you want to select, but you should play around more with the :nth-* pseudo-classes. Here is a CSS selector that selects all 3 c3's using <code>nth-child()</code></p> <pre><code>div.c1 div.c3:nth-child(1) </code></pre> <p>Like i said, you haven't really specified which one you want to select.</p> <blockquote> <p>but my lack of understanding on nth-of-type is driving me crazy. Can anyone offer insight to why the second 2 don't work or correct my basic lack of comprehension on this selector?</p> </blockquote> <p>One thing to keep in mind, is all of the <code>:nth-*()</code> pseudo-classes are dependent on their parents. Let me translate your selector:</p> <pre><code>.c1:nth-of-type(2) </code></pre> <blockquote> <p>Find anything with a class of c1 that is a second child.</p> </blockquote> <p>In your case, <code>&lt;body&gt;</code> was most likely the parent, so...</p> <pre><code>&lt;body&gt; &lt;div .c1 /&gt; &lt;div .c1 /&gt; // it highlights this one, because it's the 2nd child of the type ".c1" &lt;div .c1 /&gt; &lt;/body&gt; </code></pre> <p>Now let me explain why your other selectors are not working.</p> <p>Both <code>.c2:nth-of-type(2)</code> and <code>.c3:nth-of-type(2)</code> are looking at the parent's as well. since you are specifying a parent, it's expecting <code>&lt;body&gt;</code> as the parent. In your case, <code>&lt;body&gt;</code> isn't the parent.. the <code>&lt;div .c1 /&gt;</code> is. In reality, that selector is looking for the DOM -</p> <pre><code>&lt;body&gt; &lt;div .c1 /&gt; &lt;div .c2 /&gt; // this **would** be the second nth-of-type, but it's not really this way. &lt;div .c1 /&gt; &lt;/body&gt; </code></pre> <p>Play around with the different css selectors and pseudo-classes at <a href="http://cssdesk.com">http://cssdesk.com</a> it's very helpful to actively experiment on your own. you'll figure it out.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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