Specifying a List of Arbitrary Children (No Pattern) for Nth-Child and Nth-Of-Type

Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type

Unfortunately there isn't. Neither Selectors 4 nor CSS Syntax 3 have extended the An+B notation to allow a list of such expressions as in your 1,3,7,10 example either, though I wonder if it may be worth suggesting as it seems pretty doable. In fact, I just went ahead and suggested this (I couldn't find any earlier proposals using either the mailing list search, or Google).

The closest to a solution that Selectors 4 offers is via the :matches() pseudo, which makes it so that the only bit you have to repeat is :nth-child(...):

.study_references td:matches(
  :nth-child(1), :nth-child(3), :nth-child(7), :nth-child(10)
) { ... }

But this is still far from ideal, and is not yet implemented anyway.

If you can suss out at least part of a pattern from most of the numeric indices you're looking for, you could modify this pattern as necessary using :not() and/or additional :nth-child()/:nth-last-child() and still pick up the right elements. See this answer of mine where I refactor [9, 11, n+12] into [n+9 except 10]. However this is likely more trouble than it's worth, and the resulting selector will almost always be far from elegant unless you get really lucky as I did above.

How do you group similar n-th child selectors?

If you can't use a an+b formula to target them (which is the case in your particular example), then the code you wrote is the shortest version.

If you wish to simplify the CSS code, you could switch to classes... that however will make your HTML less clean.

Possible to target a list of nth-of-type(x) at once in CSS?

With SCSS you can create a list of elements you want to select and then use @each loop on that list with nth-of-type selector. DEMO

$list: 1 4 5;

@each $n in $list {
  div:nth-of-type($n) {
    background: blue;
  }
}

Practical use of :nth-child() and :nth-of-type() selectors

There Are Many Reasons ...

... as others have noted in comments. But you want some non-table or list reasons, so it seems.

Basic Idea

With these selectors, you are concerned about the ordering of sibling elements within the html itself for the selection (this is why they are so commonly used for tables and lists, because tr, td, and li elements are always siblings of one another in there respective place in tables and lists). Secondarily with these selectors you are concerned about being inclusive or exclusive of types of elements (hence the difference between :nth-child and :nth-of-type; and one common misconception is that these pseudo-classes can count by some .className, but they do not, they count by html element type: i.e. <div>, <li>, <span>, etc.). In general, they allow for selection of some things when the html is not able to be modified, or structure is variable, but you desire a consistent selector.

Some Scenarios

The "why" you might want to target these is what is limitless and I cannot speculate on.

Example 1, say you want to style the second to last element in a div, no matter what type it is (and dynamic html is being generated, so you don't even know for sure what element it may be), then your only way to access that element is :nth-last-child(2).

Example 2, say you want the third h3 inside a div. You have access to change styles but not html (so you cannot put a class on it and it does not have a class or id to target to). However, you know that this h3 is always the third one of its type in the html, though the number of other elements around it may vary. So h3:nth-of-type(3) allows you an ability to target that, an ability you would not have had otherwise.

I could give other scenarios (again, limitless), but if you stick with the concepts noted in "Basic Idea" you can perhaps see why they might be used.

Feasability of element[attribute]:nth-of-type(n) selector

My question then is, would it be possible in the future for an element[attribute]:nth-of-type(n) selector to return the nth element with the specified attribute?

Not really, because the "type" in :nth-of-type() has a very specific meaning, and because it's not very intuitive for a simple selector to match an element based on any other criteria than the element's own characteristics as reflected in the DOM or similar.

Would this require a whole new selector because of the way jQuery/CSS work?

Yes, and this is why Selectors 4 introduced :nth-match(), which has since become an extension to the existing :nth-child(), that considers only a subset of elements according to a selector argument. See my answer to this question. In your case it would be

$('.example').children(':nth-child(1 of textarea[for])')

This is still not implemented anywhere; hopefully that will change in the new year.

Since this is jQuery, you can use :eq(0), but unless you will only have exactly one such .example and one such textarea, you may need to iterate the .example elements using .each() (thanks to how unintuitive these non-standard selectors are).

select multiple child in css

You can separate the classes with a comma ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Note: You need to check the nth-child and define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

If you are using a server side language for generating a dynamic table, you can use functions like substr() to cut down the letters.

Side note : You don't have to use > unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)

Using nth-child(odd) does not seem to behave as I would expect

:nth-child(odd) is applied to elements that are 1st, 3rd, 5th, etc children of their own parent container, not their children. I'm guessing there are some other elements before the .formTables in their parent container? That's why every second table matches the rule, and #dynTable1 matches because it is the 1st child of #divDynamic1.

EDIT: Now that I understand what you're trying to achieve, I can suggest something like this:

.wrapper > div > .formTable
{
    background-color: #ccc;
}

.wrapper > div:nth-child(odd) > .formTable:nth-child(odd)
{
    background-color: #eeb;
}

.wrapper > div:nth-child(even) > .formTable:nth-child(even)
{
    background-color: #eeb;
}
​

What it does is reset the background color of the tables inside the divs, then specifies new alternation rules for the tables inside them - starting from gray if the div is an even child, and yellow if it is an odd child.

How to get nth child to work when interrupted

Hold onto your butts, it's time to get hacky:

Using the (deep breath) ~ general sibling combinator, we can change how elements AFTER a certain element are displayed.

             .test:nth-child(odd)  { background: #933C96; }
             .test:nth-child(even) { background: #EB811C; }
.interrupt ~ .test:nth-child(odd)  { background: #EB811C; }
.interrupt ~ .test:nth-child(even) { background: #933C96; }

<h1>This is a heading</h1>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>

Here, we've applied your initial styling, and then added an additional cascading rule for any rows that come AFTER .interrupt which swaps the colors. .interrupt can be anything, you could even do some fancy work with :not() to make it way more general, but the idea is the same.

But what if you have more than one interrupting element?! Still possible! but a bit (way) more rigged:

                                                    .test:nth-child(odd)  { background: #933C96; }                                                    .test:nth-child(even) { background: #EB811C; }
                                       .interrupt ~ .test:nth-child(odd)  { background: #EB811C; }                                       .interrupt ~ .test:nth-child(even) { background: #933C96; }
                          .interrupt ~ .interrupt ~ .test:nth-child(odd)  { background: #933C96; }                          .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #EB811C; }
             .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(odd)  { background: #EB811C; }             .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #933C96; }
.interrupt ~ .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(odd)  { background: #933C96; }.interrupt ~ .interrupt ~ .interrupt ~ .interrupt ~ .test:nth-child(even) { background: #EB811C; }

<h1>This is a heading</h1><p class="test">The first paragraph.</p><p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p><p class="test">The second paragraph.</p><p class="test">The third paragraph.</p><p class="test">The first paragraph.</p><p class="test">The second paragraph.</p><p class="test">The third paragraph.</p><p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p><p class="test">The first paragraph.</p><p class="test">The second paragraph.</p><p class="interrupt"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p><p class="test">The third paragraph.</p>

Can someone explain why the nth-child-selector has a higher priority than hover?

The selectors have the same specificity, so the one that comes last takes priority.

---

Related Topics