CSS Pseudo-classes child selectors

If you want box border or button border or div border without margin and showing proper  you can use pseudo class “:not() selector”

class .btn-group button:not(:first-child) ,This Pseudo-class or selector work opposite type for example all button right side border none except first button, you can see your first button border is proper.

.btn-group button:not(:last-child) This Pseudo-class or selector effected  your all button right side border remove except last button.

For example without “:not() selector” CSS code

<style>
.btn-group button {
background-color: #4CAF50;
border: 5px solid red;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
}
.btn-group button:hover {
background-color: #3e8e41;
}
</style>

HTML code

<!Doctype html> 
<html>
<body>
<div class="btn-group">
<button>Gulam</button>
<button>Maleek</button>
<button>Rehan</button>
<button>Anup</button>
</div>
</body>
</html>

See Demo

 

With”:not() selector” CSS code

<style>
.btn-group button {
background-color: #4CAF50;
border: 5px solid red;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
}
.btn-group button:hover {
background-color: #3e8e41;
}
.btn-group button:not(:last-child) {
 border-right: none; /* Prevent double borders */
}
</style>

HTML code

<!Doctype html> 
<html>
<body>
<div class="btn-group">
<button>Gulam</button>
<button>Maleek</button>
<button>Rehan</button>
<button>Anup</button>
</div>
</body>
</html>

See Demo

:not() child selector

If you are using the list style inline and  between the text “|” you can use it : not(): after selector.

CSS code

<style>
ul {
    list-style-type: none;
}
li {
    display: inline; 
}
li a {
padding:10px; text-decoration:none;
} 
li a:hover{
padding:10px; color:red;  
text-decoration:underline; 
transition:1s;
} 
li:not(:last-child):after {
    content:"|";
}
</style>

HTML code

<!Doctype html> 
<html>
<body>
<ul>
 <li><a href="">One</a></li>
 <li><a href="">Two</a></li>
 <li><a href="">Three</a></li>
 <li><a href="">Four</a></li>
 <li><a href="">Five</a></li>
</ul>
</body>
</html>

CSS3 Method

<style>

li:not(:last-of-type):after
{
content:"|";
}
</style>

See Demo

You can use Jquery Method also

<script>
$(document).ready(function () {
$("li:not(:last)").append(" | ");
});
</script>

See Demo