CSS :Not(:Last-Child):After Selector

CSS :not(:last-child):after selector

If it's a problem with the not selector, you can set all of them and override the last one

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

or if you can use before, no need for last-child

li+li:before
{
  content: '| ';
}

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: How to affect :after Pseudo Element if Last-Child li gets hovered?

li:nth-child(4):hover is already saying

li, which is the 4th element, which is being hovered

so li:nth-child(4):hover + li:last-child:after is looking for a 5th li sibling that immediately follows the 4th element and is also the last child.

li:nth-child(4):hover ~ li:last-child:after is looking for a 5th li sibling that is somewhere after the 4th element and is also the last child.

li:nth-child(4):hover > li:last-child:after is looking for an li that is a child of the 4th li and is also a last child.

and li:nth-child(4):hover li:last-child:after is looking for an li that is a descendant of the 4th li and is also a last child.

depending on what you're looking for you can either use:

li:nth-child(4):hover:after { transform: translatex(400px);}

li:last-child:hover:after { transform: translatex(400px);}

or li:nth-child(4):hover:last-child:after { transform: translatex(400px);} if you want to be consistent with the other ones.

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired action for li childs 1 to 3*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}


li:nth-child(4):hover:last-child:after { transform: translatex(400px);}

<div>
   <ul>
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
   </ul>
</div>

Using :not(:last-child):after pseudo elements for each row inside an unordered list

What about something like this --> https://jsbin.com/mereqex/edit?html,css,output

CSS:

ul {
   padding-left: 0;
   margin-left: 0;
   text-align: center;
}

li {
  display: inline;
}

.lineup-list li:not(:first-child):before {
  content:  " \B7  ";
}

.lineup-list li:nth-child(3n):before {
  content: "\A";
  white-space: pre;
}

HTML:

<ul class="lineup-list">
  <li>Amazing Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Cool Band</li>
  <li>Nice Band</li>
  <li>Cool Band</li>
</ul>

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>

I need to select (not last child) only if it has a specific class

Instead of applying padding-right to everything except the last one, you can apply padding-left to everything except the first one. This will make your code much more intuitive and simple to read.

Check this out:

 a[class^=action--] + a {
     padding-left: 5px;
 }

 a[class^=action--] + a {     padding-left: 5px; }

<table>    <tr>        <td><img src="http://via.placeholder.com/350x150" height="40" width="40" /></td>        <td>Triple monochromator for Raman</td>        <td>            <a href="i"><img src="http://via.placeholder.com/24x24"/></a>        </td>        <td>            <a class="action--edit"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>            <a class="action--delete"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>            <a class="action--view"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>        </td>    </tr></table>

How to remove the border of last child in list items using after

It is the li element not the span that is the last child that you want to target.

So use:

.list-container ul li:last-child span.icons::after {
  border: none;
}

not:first-child selector

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
    background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

Different behaviour between :last-child and :not(:last-child)

nav :last-child includes your single<ul> element. Since there is only one, it is a :last-child. So it applies text-transform: uppercase; to all if its contents, in this case, all three <li> elements. It is also being applied to the last <li>, because it is also a :last-child. To see this more clearly, here is an example with two <ul> elements.

nav :last-child {   text-transform: uppercase;}

<nav>  <ul>    <li>This is not a last-child, and parent not a last-child</li>    <li>This is not a last-child, and parent not a last-child</li>    <li>Last-child of li in this section</li>  </ul>  <ul>    <li>Parent ul of these li's is a last-child</li>    <li>So all three li's</li>    <li>Are uppercase</li>  </ul></nav>

CSS :Not(:Last-Child):After Selector