jQuery :nth-last-child() Selector

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

Last Updated : 20 Jan, 2025

The :not(:last-child):after selector is used to apply styles to elements that are not the last child of their parent and also apply an :after pseudo-element.

It is helpful for adding visual separators (e.g., lines or dots) between items while excluding the last item.
Combines the power of :not() and :after for better styling control.

Syntax:

element:not(:last-child)::after {
    content: " ";
    /* Additional styling properties */
}

HTML

<html>
<head>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li:not(:last-child):after {
            content: '|';
            margin: 0 10px;
            color: gray;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

The :not(:last-child):after selector adds a | after each list item except the last one.
The margin creates space between the content and the separator.

More Example of CSS :not(:last-child):after Selector

Dotted Separator Between Spans

HTML

<html>
<head>
    <style>
        .container span:not(:last-child):after {
            content: ' • ';
            color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>Home</span>
        <span>About</span>
        <span>Contact</span>
    </div>
</body>
</html>

The :not(:last-child):after adds a blue dot between spans.
The last span has no pseudo-element added, making it clean.

Adding a Hyphen Between List Items

HTML

<html>
<head>
    <style>
        ul li:not(:last-child)::after {
            content: ' -';
            color: #888;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            display: inline;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>
</body>
</html>

The :not(:last-child)::after selector appends a hyphen – after each list item except the last, creating a simple inline list with separators.

jQuery :nth-last-child() Selector

arpancodes

Improve

Article Tags :

Similar Reads

CSS :nth-last-child() Selector

The nth-last-child() selector in CSS is used for selecting elements based on their position among sibling elements, but starting the count from the end rather than the beginning. This selector is particularly useful for styling elements dynamically based on their order in reverse, allowing for flexi

CSS :last-child Selector

The CSS :last-child selector targets the last child element within its parent. It applies styles exclusively to the last child based on its position within the parent container, regardless of the element type or class. If the parent element is missing or incorrectly structured, the selector will not

CSS :nth-child() Selector

The :nth-child() pseudo-class selector targets elements based on their position among siblings, making it ideal for dynamic styling. It can select elements using specific positions (e.g., first, odd, or even), or patterns like An+B. This flexible CSS tool improves web design by simplifying how you a

CSS First Child Selector

CSS :first-child selector is used to select the elements that are the first child of the parent element. Syntax: :first-child { /* CSS property */ }Example 1: This example shows the use of the CSS first child selector. [GFGTABS] html <!DOCTYPE html> <html> <head> <title>first

jQuery :nth-last-child() Selector

The jQuery :nth-last-child() selector is used to select all elements that are the nth last child of their parent. The counting of elements starts from the last element. Syntax: :nth-last-child( n | even | odd | formula )Parameters: The :nth-last-child() selector contain parameters which are listed b

CSS :only-child Selector

The:only-child selector in CSS is used to match every element that is the only child of its parent. It represents an element without any siblings.Â Syntax: :only-child { // CSS property} Example 1:Â [GFGTABS] html <!DOCTYPE html> <html> <head> <title>:only-child selector</

CSS ::after Selector

::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector. Syntax: ::after{ content:}Below HTMl/CSS code shows the functionality of ::after selector : [GFGTABS] HTML <!DOCTYPE html> <html> <head

How to use a not:first-child Selector in CSS?

The :not(:first-child) selector in CSS targets all elements that are not the first child within their parent. It allows you to style elements except the first one, making it useful for applying styles to subsequent items in a list or layout. Syntax:not( element ) { // CSS property } Example: In this

jQuery :last-child Selector

It is a jQuery Selector used to select every element that is the last child of its parent. Syntax: $(":last-child")Example 1: Here is the basic example of a last-child selector. C/C++ Code <!DOCTYPE html> <html> <head> <title>jQuery :last-child Selector</title> <scri

CSS Child vs Descendant selectors

In CSS, child and descendant selectors are used for targeting elements based on their hierarchical relationships in the HTML structure. These selectors allow you to apply styles with precision and control. This article will help you understand the differences between these two selectors and provide