Open In App

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

Last Updated : 25 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The : not(:last-child): after CSS selector is employed in front-end web development to style elements, specifically adding content after each child element except the last one. This selector is useful when we want to target elements that cannot be directly selected. It is commonly used to enhance styling and visual presentation in HTML layouts.

Approach:

  • .div .inner-div: Selects all the elements with class ‘inner-div’ inside elements with ‘div’ class. Here, all three divs have class ‘div’ with two children divs with class ‘inner-div’. It selects all six div element with class name ‘inner-div’.
  • :not(:last-child) 
    • The :not() selector excludes the element passed to it from selection.
    • The :last-child selector selects the last child.
    • Combining these two above selector to excludes the last children (inner-div) of every parent div from the selection.
  • :after This is a great selector to add content (or sometimes, even block-level elements) after the selected elements (Here the first inner-div in every set of inner-divs). So, the content ‘not in the bottom div’ is indeed only added in the top div and not in the bottom div.

Example 1: This example shows the uses of: not(:last-child): after selector with the help of an HTML document. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            margin: 10px;
            box-shadow: 0 0 5px black;
            background: green;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
 
        .inner-div {
            width: 90%;
            height: 45%;
            background: white;
            margin: 0 auto;
            padding-left: 2px;
        }
 
        .div .inner-div:not(:last-child):after {
            content: 'not in the bottom div';
        }
    </style>
</head>
 
<body>
    <div class="div">
        <div class="inner-div"></div>
        <div class="inner-div"></div>
    </div>
    <div class="div">
        <div class="inner-div"></div>
        <div class="inner-div"></div>
    </div>
    <div class="div">
        <div class="inner-div"></div>
        <div class="inner-div"></div>
    </div>
</body>
 
</html>


Output:

Example 2: This example creates a simple div element. It does not use: not(:last-child): after selector. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS :not(:last-child):after Selector</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            outline: 1px solid;
            margin: 10px;
            box-shadow: 0 0 5px black;
            background: green;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
 
        .inner-div {
            width: 90%;
            height: 45%;
            background: white;
            margin: 0 auto;
            padding-left: 2px;
        }
    </style>
</head>
 
<body>
    <div class="div">
        <div class="inner-div"></div>
        <div class="inner-div"></div>
    </div>
    <div class="div">
        <div class="inner-div"></div>
        <div class="inner-div"></div>
    </div>
    <div class="div">
        <div class="inner-div"></div>
        <div class="inner-div"></div>
    </div>
</body>
 
</html>


Output: 

Example 3: This example shows the use of inserting || beside the list of courses by using CSS :not(:last-child):after Selector.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS :not(:last-child):after Selector</title>
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        li:not(:last-child):after {
            content: ' || ';
            font-weight: 700;
        }
 
        li {
            display: inline;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h3>CSS :not(:last-child):after Selector</h3>
    <div>GeeksforGeeks Subjects</div>
 
    <ul>
        <li>Data Structure</li>
        <li>Algorithm</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>


Output: 

Supported Browsers:

  • Google Chrome 4
  • Edge 12
  • Firefox 3.5
  • Opera 9
  • Safari 3.1 

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Similar Reads

Last-child and last-of-type selector in SASS
SASS is also called Syntactically Awesome Stylesheet. It is a programming language that is interpreted into CSS. The Last Child selector is a selector that allows the user to target the last element inside the containing element. This selector is also known as a Structural Pseudo class which means it is used for styling content on the basis of pare
2 min read
CSS :last-child Selector
The :last-child Selector is used to target the last child element of it's parent for styling. This selector is same as ":nth-last-child". Syntax: :last-child { //property } Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; p:last-child { background: limegreen; color: white; font-style: italic; font-size: 1.875em; } &lt;/style
1 min read
CSS :nth-last-child() Selector
The nth-last-child() selector in CSS is used to match elements based on their position among the group of siblings, counting from the end. Syntax: :nth-last-child(number) { //CSS Property } Where number is the argument that represents the pattern for matching elements counting from the end. It can be odd, even or in a functional notation. odd: It r
2 min read
How to use a not:first-child selector in CSS?
This selector is used to select every element which is not the first-child of its parent element. It is represented as an argument in the form of :not(first-child) element. Syntax: :not( element ) { // CSS property } Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;not first child selector&lt;/title&gt; &lt;style&gt; h1 { color
1 min read
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 below: n: It holds the child index number of the se
2 min read
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 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery :last-child Selector&lt;/title&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/lib
1 min read
CSS :first-child Selector
The :first-child selector is used to select those elements which are the first-child elements. For :first-child selector the &lt;!DOCTYPE&gt; must be declared for IE8 and earlier versions. Syntax: :first-child { /* CSS property */}Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;first child selector&lt;/title&gt;
1 min read
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: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;:only-child selector&lt;/title&gt; &lt;style&gt; h1 { color: green; text-align:
2 min read
CSS :nth-child() Selector
The :nth-child() CSS pseudo-class selector is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child, regardless of the type, of its parent. Syntax: :nth-child(number) { // CSS Property }Where number is the single argument that represents the pattern for matching elements. It can be
2 min read
Difference between :first-child and :first-of-type selector in CSS
Both of them are selectors for the HTML used in the CSS to select specific children. The :first-child: The :first-child selector is used to select those elements which are the first-child elements. For :first-child selector the &lt;!DOCTYPE&gt; must be declared for IE8 and earlier versions.The :first-of-type: The :first-of-type Selector is used to
2 min read