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

30 Jul, 2021
Often we encounter a situation in front-end web development where we have a number of elements in HTML and we need to give a specific style to just the last element or to every element except the last element or basically to that element which cannot be selected directly. There comes the use of pseudo selectors. This article explains the :not(:last-child):after selector. This selector does not select the element after the last child element. It is mostly used to add the content after every child element except the last.Example 1: This example creates a simple div element. It does not uses :not(:last-child):after selector.  
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;        }    </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: After applying the pseudo selector :not(:last-child):after to the above example. 
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:  
Explanation:  
.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.
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 3:  
html
<!DOCTYPE html><html>  <head>    <style>        li:not(:last-child):after {            content: ' || ';            color:green;            font-weight:bold;        }        li {            display: inline;        }    </style></head>  <body style="text-align:center;">          <h1 style="color:green;">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
Internet Explorer
Firefox
Opera
Safari 
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.
Akanksha_Rai
ysachin2314
Picked
CSS
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to set div width to fit content using CSS ?
Making a div vertically scrollable using CSS
How to set fixed width for <td> in a table ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript