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