The CSS not selector is the pseudo-class element of the CSS that does not refer to given elements. If we want to set some style tag on a particular tag, then CSS uses a simple class, id or element name. If we do not want to set some style tag on the attribute, then CSS does not selector uses on style tag.
Methods for CSS Not Selector
The CSS not selector is used on the style tag with the elements, ID, and attribute class. The following methods operate the CSS not selector.
- By using only attribute
- By using attributes and elements
By Using only Attribute
The CSS not selector employs the "not" selector with attributes to exclude specific attributes. It can target single attributes, attribute IDs, and attribute classes.
Syntax
The syntax below demonstrates the application of the CSS not selector within a style tag.
/* write properties and their value */
}
Examples
The upcoming instances demonstrate the "CSS not selectors" technique and characteristics. Various style tags can be applied to distinct attributes of the HTML elements.
Example 1
The given instance demonstrates the fundamental CSS not selector's styling.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
:not(p){
background-color: lightgrey;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute
</h3>
<p id = "class2">
If we do not want to set some style tag on the attribute, then CSS does not selector uses on style tag.
</p>
<br>
<b>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</b>
</div>
</body>
</html>
Output:
The result displays the CSS :not selector along with its styling properties.
Example 2
The provided instance demonstrates the identical attribute using CSS style attributes rather than a selector.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
}
:not(p){
font-style: italic;
color: blue;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute
</h3>
<p id = "class2">
If we do not want to set some style tag on the attribute, then CSS does not selector uses on style tag.
</p>
<br>
<b>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</b>
</div>
</body>
</html>
Output:
The result displays the CSS :not selector along with its corresponding style properties.
Example 3
The below illustration demonstrates the basic not selector targeting the paragraph tag with a specific id. It allows us to manipulate a single tag by referencing its id attribute.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
:not(#class2){
font-style: bold;
color: green;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute ID
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>
Output:
The result displays the CSS :not selector and its associated styling properties.
Example 4
The upcoming illustration demonstrates the basic not selector with the class attribute of the paragraph element. Utilizing this method allows us to target a specific paragraph element based on its class.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
:not(.same){
font-style: bold;
color: yellow;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Attribute Class
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p class = "same">
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>
Output:
The result displays the CSS :not selector along with its associated style.
By Using Elements and Attribute
The CSS "not" selector excludes elements and attributes with a specific selector, allowing us to target elements without a particular attribute. It is possible to apply this selector to attributes, attribute IDs, and attribute classes within the same elements. When aiming to target specific elements or attributes, or when focusing on a single attribute, utilizing the elements and attributes effectively achieves this goal.
Syntax
The provided syntax utilizes the CSS not selector within the style tag.
element:not(attribute){
/* write properties and their value */
}
Description:
- Elements such as ancestor elements can be utilized to access attributes.
- The attribute is not associated with a CSS property.
Examples
The examples below demonstrate how CSS can be applied to attributes and elements, rather than focusing on the style and properties of the selector.
Example 1
The provided illustration demonstrates fundamental CSS, showcasing the style of selectors by utilizing elements and attributes.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
p:not(#class2){
color: crimson;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements and Attribute
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
<b>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</b>
</p>
</div>
</body>
</html>
Output:
The result displays the CSS "not" selector along with its respective style properties.
Example 2
The given example demonstrates identical elements with varying attributes using CSS style declarations instead of selectors.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 200px;
width: 350px;
border : 2px solid black;
}
p:not(.class2){
font-style: italic;
color: blue;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements and Attribute
</h3>
<p class = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>
Output:
The result displays the CSS :not selector along with its styling properties.
Example 3
The below illustration demonstrates the basic not selector targeting the paragraph tag with a specific id. It allows us to manipulate a single tag within the paragraph tag by referencing its id.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
div:not(p){
font-style: italic;
color: green;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements And Attribute ID
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p>
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>
Output:
The result displays the CSS :not selector and its associated style properties.
Example 4
The provided instance demonstrates the basic not selector with the class attribute of the paragraph element. Utilizing this technique allows us to target a specific paragraph by its class.
<!DOCTYPE html>
<html>
<head>
<title> CSS not Selector </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 180px;
width: 350px;
border : 2px solid black;
}
p:not(.good){
font-style: italic;
color: red;
font-size: 14px;
}
p{
font-style: normal;
color: orange;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS not Selector with Elements And Attribute Class
</h3>
<p id = "class2">
If we want to not set some style tag on the attribute then CSS not selector uses on style tag.
</p>
<p class="good">
The CSS not selector is the pseudo-class element of the CSS to not refer to given elements
</p>
</div>
</body>
</html>
Output:
The result displays the CSS :not selector along with its associated style properties.
Conclusion
The CSS not selector is employed to exclude specific attributes and elements from receiving a CSS style. It allows us to apply any CSS property and value using the not function in combination with the attribute name.