Select The Last 3 Child Elements

Select the last 3 child elements

You can read more here about nth-last child, but this should basically do the trick of selecting the last 3 children with just CSS

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

fiddle demonstration from Fabrício Matté

This will only select those rows returning a positive number for out N expression (-n+3), and since we are using nth-last-child, it's counting from last to first,
so first rows from bottom gives,

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

everything else will return a negative number

Select last 3 children based on the number of children

Is this what you are looking for?

.flex-item:first-child:nth-last-child(7)

targets the first child when there are only 7 items so that

.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(n+5)

is only triggered when there are 7 items

.flex-container {  display: flex;  flex-flow: row wrap;  justify-content: space-between;  padding: 0;  margin: 0;  list-style: none;}
.flex-item {  background: tomato;  padding: 5px;  width: 200px;  height: 150px;  margin-top: 10px;  line-height: 150px;  color: white;  font-weight: bold;  font-size: 3em;  text-align: center;}
.flex-item:first-child:nth-last-child(7),.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(-n+4) {  flex-basis: 23%;}
.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(n+5) {  flex-basis: 31%;  background: blue;}

<ul class="flex-container">  <li class="flex-item first">1</li>  <li class="flex-item">2</li>  <li class="flex-item">3</li>  <li class="flex-item">4</li>  <li class="flex-item">5</li>  <li class="flex-item">6</li>  <li class="flex-item">7</li></ul><br/><br/><ul class="flex-container">  <li class="flex-item first">1</li>  <li class="flex-item">2</li>  <li class="flex-item">3</li>  <li class="flex-item">4</li>  <li class="flex-item">5</li>  <li class="flex-item">6</li>  <li class="flex-item">7</li>  <li class="flex-item">8</li>  <li class="flex-item">9</li>  <li class="flex-item">10</li></ul><br/><br/><ul class="flex-container">  <li class="flex-item first">1</li>  <li class="flex-item">2</li>  <li class="flex-item">3</li>  <li class="flex-item">4</li>  <li class="flex-item">5</li></ul>

How to select last three child elements with help of :nth-child

span:nth-last-child(-n+3)

It selects the last 3 elements

how to select the last 4 elements using nth child?

Try it:

ul li {  display: inline-block;  width: 100%;;}
ul li:nth-last-child(-n+4) {  color: red;}

<ul>  <li>1</li>    <li>2</li>    <li>3</li>  <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>9</li>  </ul>

Nth-child css target last and first 3 child

First, you need a way to identify the ul you are interested in. You can add a class or id to the outermost ul so that your selectors don't target other ul's. (If editing the HTML is not an option, you can use the parent element in your selector, and select only direct descendant ul's.)

Next, use the right selectors, to get the first and last 3 children.

To select first 3 children:

ul.top > li:nth-child(-n+3)

To select last 3 children:

ul.top > li:nth-last-child(-n+3)

See it here.

Is it possible to select the last n items with nth-child?

This will select the last two iems of a list:

li:nth-last-child(-n+2) {color:red;}

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

CSS last three children only if condition

I think you want

li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+3):nth-child(3n+1) ~ * {
   font-weight: bold;
}

That is, it selects the element among the last 3 whose index mod 3 is 1. And then it also adds the following siblings (if any).

/* Tests */document.styleSheets[0].ownerNode.textContent += ".fail { color: red; } .fail::after { content: ' - FAIL'; }"for (var i=0; i<10; ++i) {  var ul = document.body.appendChild(document.createElement('ul'));  for (var j=0; j<=i; ++j) {    var li = ul.appendChild(document.createElement('li'));    li.appendChild(document.createTextNode(j+1+'-th item '));  }  for (var j=0; j<=i; ++j) {    var li = ul.children[j];    var isSelected = getComputedStyle(li).fontWeight === '700';    if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = "fail";  }}

li:nth-last-child(-n+3):nth-child(3n+1),li:nth-last-child(-n+3):nth-child(3n+1) ~ * {   font-weight: bold;}

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

CSS: last-child of parent

You can use .parent > *:last-child or just .parent > :last-child

An asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect.

.parent > *:last-child {  background-color: red;}

<div class="parent">  <p>First child</p>  <input type="text" placeholder="Second child" />  <div>Third child</div></div>

---

Related Topics