CODEWITHSUNDEEP
csscss-selectors
user1937021
user1937021

Reputation: 10801

nth child to target 2nd, 3rd, 5th, 6th, 8th 9th etc

I'd like to target the following the children elements:

.row .column:last-child .column:nth-child(2),
 .row .column:last-child .column:nth-child(3),
 .row .column:last-child .column:nth-child(5),
 .row .column:last-child .column:nth-child(6),
 .row .column:last-child .column:nth-child(8),
 .row .column:last-child .column:nth-child(9) {
...

but is there a better way to write this?

Upvotes: 2

Views: 5652

Answers (3)

Sidev
Sidev

Reputation: 49

A bit late but I'm surprised nobody mentioned the easy and native CSS :first-child which can be negated as :not(:first-child). In your case, you can replace this huge selector :

.row .column:last-child .column:nth-child(2),
 .row .column:last-child .column:nth-child(3),
 .row .column:last-child .column:nth-child(5),
 .row .column:last-child .column:nth-child(6),
 .row .column:last-child .column:nth-child(8),
 .row .column:last-child .column:nth-child(9) {
   ...
}

with the following :

.row .column:last-child .column:not(:first-child):not(:nth-child(4)):not(:nth-child(7)):not(:nth-child(9+n)) {
   ...
}

Upvotes: 0

Daniel Randall
Daniel Randall

Reputation: 371

Your selector is targeting based on the OR of the three conditions (descendant of .row OR last child of .column type OR nth child of .column type).

This approach targets a specific child within a specific child count:

/* 9 items, match item 2: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(2)
{
  color: red;
}

/* 9 items, match item 3: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(3)
{
  color: red;
}

/* 9 items, match item 5: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(5)
{
  color: red;
}

/* 9 items, match item 6: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(6)
{
  color: red;
}

/* 9 items, match item 8: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(8)
{
  color: red;
}

/* 9 items, match item 9: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(9)
{
  color: red;
}
<ul>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
</ul>

I have found the above useful for applying weighted column widths that change when the child count changes.

An extra bit of knowledge on this subject would be matching the first child of 9 children (as it is done differently, that is, without the Adjacent Sibling "~" operator):

    /* 9 items, match item 1: */
    .column:first-of-type:nth-last-of-type(9)
    {
      color: green;
    }
    <ul>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
    </ul>

Upvotes: 0

Harry
Harry

Reputation: 89780

You can use the below combination of the below two selectors to select 2nd, 3rd, 5th, 6th elements and so on in the same pattern.

  • :nth-child(3n-1) - Selects 2nd (= 3*1 - 1), 5th (= 3*2 - 1), 8th (= 3*3 - 1), ...
  • :nth-child(3n) - Selects 3rd (3*1), 6th (3*2), 9th (3*3), ...
li:nth-child(3n),
li:nth-child(3n-1) {
  color: red;
} 


.column:nth-child(3n),
.column:nth-child(3n-1) {
  color: red;
}
<ul>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
</ul>

Note: Be careful while using a class in the nth-child selector because the selector will not count just the elements with that class alone. CSS would style every nth-element which also happens to have that class.

So, in the below sample the 3rd element will not get the style because it does not have the class='column'. The 4th element will also not get the style (even though it is the 3rd child to have the required class) because as mentioned earlier nth-child counts all children and not just the children with the mentioned class.

.column:nth-child(3n),
.column:nth-child(3n-1) {
  color: red;
}
<ul>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
</ul>

Upvotes: 8

Related Questions