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>
You can use Jquery Method also
<script> $(document).ready(function () { $("li:not(:last)").append(" | "); }); </script>