CSS not last-child after selector

0 votes

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

Does anyone know how to CSS select all but the last element?

You can see the definition of the :not() selector

Jul 11, 2022 in CSS by Edureka
• 13,620 points
2,451 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
0 answers

input[type='text'] CSS selector does not apply to default-type text inputs?

Text is the default input type. Therefore, ...READ MORE

Aug 12, 2022 in CSS by Edureka
• 13,620 points
537 views
0 votes
1 answer

nbsp not working in CSS content tag

May be this could be the solution ...READ MORE

answered May 28, 2022 in CSS by Edureka
• 12,690 points
1,121 views
0 votes
1 answer

How to combine input:after:focus pure css?

One method is to create an element ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
1,322 views
0 votes
1 answer

CSS text-overflow: ellipsis; not working?

So, if you've arrived at this question ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
4,662 views
0 votes
1 answer

asp.net master page css not applying to asp form pages

just try the following code: <head> ...READ MORE

answered Jun 13, 2022 in CSS by Edureka
• 12,690 points
2,466 views
0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
4,268 views
0 votes
1 answer

wildcard * in CSS for classes

Yes you can do this. *[id^='term-']{ ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
639 views
0 votes
1 answer

jQuery vs document.querySelectorAll

As seen above, querySelector() methodcan only be used ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
4,592 views
0 votes
1 answer

input[type='text'] CSS selector does not apply to default-type text inputs?

Because that is not what it is ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
1,607 views
0 votes
0 answers

Combinators in CSS

everyone! I am quite new to HTML ...READ MORE

Jul 8, 2022 in CSS by Edureka
• 13,620 points
349 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP