How to Select All Children of an Element Except the Last Child

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 select all child elements except first two and last two

You don't even need :not(). :nth-child(n+3):nth-last-child(n+3) works fine.

Check it out here.

Select child tags :after element, except last

Not sure about your code, but you may not even need the * you can combine :last-child and :after like so

.parent > :after {    content: "";    display: block;    width: 20px;    height: 20px;    margin: 5px;    background-color: orange;}

.parent > :last-child:after {    background-color: green;}

<div class="parent">    <div></div>    <div></div>    <div></div>    <div></div></div>

CSS select all preselected elements except the last of them

Unfortunately, after further reading I came to a conclusion that as of now it's not possible to achieve what I want with pure CSS. There is hope for (near?) future though.

What I want to achieve can be "simplified" by, first, hiding everything, then overriding that styling only for one or two selected items (thanks @Kaiido for your comment to OP). For now, out of 4 possible cases (required overrides), css can handle only 3:

last item in full true list with [data-attr="true"]:last-child,
first item in full false list with [data-attr="false"]:first-child,
first false item in mixed list with [data-attr="true"]+[data-attr="false"]

For the 4th case, this draft has to become working standard and be implemented by major browser engines:

last true item in mixed list with :has(+[data-attr="false"]) (I hope that's the right code for current draft).

There are ways to simulate "previous sibling selector" functionality, although that won't work when you need both previous and next sibling selectors. More on that here

Example below (I've grayed out items instead of hiding them so that original lists are visible):

div {  border: 1px solid red;  margin: 5px;}
/* virtual display: none; on every item */.container .item {  background: gray;}
/* "unhiding" required items */.container .item[data-attr="true"]:last-child,.container .item[data-attr="false"]:first-child,.container .item[data-attr="true"]+[data-attr="false"]{  background: lime;}
/* 4th case, that might work in the future with introduction of CSS selectors level 4 */.container .item[data-attr="true"]:has( +[data-attr="false"] ){  background: lime;}

<!DOCTYPE html><html lang="en" dir="ltr"><head>  <meta charset="utf-8"></head><body>  <div class="container">    <div class="item" data-attr="true">1 true</div>    <div class="item" data-attr="true">2 true</div>    <div class="item" data-attr="false">3 false</div>    <div class="item" data-attr="false">4 false</div>  </div>  <div class="container">    <div class="item" data-attr="true">1 true</div>    <div class="item" data-attr="true">2 true</div>    <div class="item" data-attr="true">3 true</div>    <div class="item" data-attr="true">4 true</div>  </div>  <div class="container">    <div class="item" data-attr="false">1 false</div>    <div class="item" data-attr="false">2 false</div>    <div class="item" data-attr="false">3 false</div>    <div class="item" data-attr="false">4 false</div>  </div></body></html>

CSS nth-child select all but last element when length is unknown

Use :not(:last-child) to target all except the last.

http://jsfiddle.net/96nd71e3/1/

Apply CSS to all but last element?

Change:

.menu a:last-of-type {
  border-right: none;
}

to:

.menu li:last-of-type a {
  border-right: none;
}

.menu a {     border-right: 1px dotted #ccc;}.menu li:last-of-type a {  border-right: none;}

<ul class="menu">  <li><a>list item 1</a></li>  <li><a>list item 2</a></li>  <li><a>list item 3</a></li>  <li><a>list item 4</a></li>  <li><a>list item 5</a></li></ul>

Excluding last-child

Did you try:

ul li:not(:last-child)