Menu
I have a list of elements, which are styled like this:
ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; }<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>Outputs One | Two | Three | Four | Five | instead of One | Two | Three | Four | Five
Anyone know how to CSS select all but the last element?
You can see the definition of the :not() selector here
344
There is a:not selector in css3. Use :not() with :last-child inside to select all children except last one.
When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.
If you need to get the last . hr element out of the document, regardless of what it's inside, then you can't do that in CSS. In CSS, you can only select the first, last, or nth element at one particular level of the hierarchy, you can't select the last element of some type regardless of what it's nested in.
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: '| '; } Every things seems correct. You might want to use the following css selector instead of what you used.
ul > li:not(:last-child):after If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
