Cant get "nth-last-child" to work

Question

Trying to apply styles to all of the elements except the last one. But it doesn't work. Tried all this:

ul li:not(ul li:nth-last-child)
ul li:not(nth-last-child)
ul li:not(:nth-last-child)

ul {
  list-style: none;
  margin: 0;
  float: left;
  width: 100%;
  text-align: center;
}
ul li {
  height: 54px;
  width: 54px;
  border-radius: 60px;
 
}

 /* /// THIS PART IS NOT WORKING PROPERLY 
 RIGHT NOW IT REMOVES MARGIN FOR ALL THE ELEMENTS/// */
 ul li:not(ul li:nth-last-child) {
 margin-left: 10px;
}

.red {background: #fc4c4f;}
.blue {background: #4fa3fc;}
.yellow {background: #ECD13F;}

<ul>
  <li class="red selected"></li>
  <li class="blue"></li>
  <li class="yellow"></li>
</ul>

`:nth-last-child()` is a functional pseudo-class. It's not going to work if it doesn't know what n is supposed to be. Also, `:not()` doesn't accept combinators in CSS, unlike jQuery. See http://stackoverflow.com/questions/10711730/why-is-my-jquery-not-selector-not-working-in-css — BoltClock, Mar 13 '15 at 09:57

Imesh Chandrasiri · Accepted Answer · 2015-03-13T09:53:58.110

0

try the following. I assume that you dont want to apply the css to the last ul li element.

ul > li:not(:last-child){
   margin-left: 15px;
}

:nth-last-child actually expects a parameter which to look for.

CSS3 :nth-last-child() Selector

edited Mar 13 '15 at 09:53

answered Mar 13 '15 at 09:23

Imesh Chandrasiri

5,558
15
60
103

This deletes margin for all elements... I have a dded the code in the question. Please help) – Alexey Tseitlin Mar 13 '15 at 09:39

score 0 · Answer 2 · answered Mar 13 '15 at 10:03

Trying to apply styles to all of the elements except the last one.

Why not use last-child?

ul {
  list-style: none;
  margin: 0;
  float: left;
  width: 100%;
  text-align: center;
}
ul li {
  height: 54px;
  width: 54px;
  border-radius: 60px;
}
ul li:not(:last-child) {
  margin-left: 10px;
}
.red {
  background: #fc4c4f;
}
.blue {
  background: #4fa3fc;
}
.yellow {
  background: #ECD13F;
}

<ul>
  <li class="red selected"></li>
  <li class="blue"></li>
  <li class="yellow"></li>
</ul>

Cant get "nth-last-child" to work

2 Answers2