:not( )pseudo class is another type of selector. We use this type of selector when we want to select a list of elements except those that are specified within the :not( ) pseudo class.
For example
If we want to select those elements that have “class” attribute and the value is “animal” but not those elements that their elements is <div> we can create the selector like this:
.animal:not(div)
If we want to select all the <img> elements in a page but not those elements that have a class attribute with the value of “notation” we can create the selector like this:
img:not(.notation)
If we want to select all those <li> element in a page but not those elements that are the first child, we can create the selector like this:
li:not(first-child)
Note: You can only use simple selectors within the :not( ) selector.
Simple selectors are:
-
Class name
-
Id name
-
Element name
-
Pseudo classes like :hover :first-child, last-child, :visited
etc.)
Descendant selectors, pseudo-elements and group selectors are not valid for using within :not ( ) selector.
Also you can’t use multiple :not selector together.
For example: p:not(.class):not(#first){ }Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
li:not(#li1){
background-color: red;
}
</style>
</head>
<body>
<ul>
<li id="li1">List Item one</li>
<li id="li2">List Item two</li>
</ul>
</div>
</body>
</html>