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>