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

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: After applying the pseudo selector :not(:last-child):after to the above example.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Explaination:

  • .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.

    It selects the three inner-div class elements or every first inner-div element.

  • :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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.