Updated June 27, 2023
Definition of CSS Not Selector
The CSS pseudo-class called the: not selector describes the elements which don’t suit a selector list. In CSS, the :not selector allows you to select elements that do not match a specific selector. While the :not selector does accept a single selector as an argument, you can still achieve the desired effect of selecting an element that does not have a certain class by combining selectors.
The:not selector will take any of the following as an argument:
- Selector type (e.g p, span, etc.)
- Selector of class (e.g .element,.sidebar, etc.)
- Selector ID (e.g. with #id_name)
- Selector in pseudo-class (e.g.:first-child,:last-of-type)
- Selector attributes (e.g [type=”checkbox])
- Universal selector (*)
Syntax and Parameters
The syntax for CSS not selector can be written as shown below:
:not(selector) {
// define CSSstyles here
}
For instance,
p:not(selector_name) {
property_one: value_one;
property_two: value_two;
...
property_n: value_n;
}
For example,
p:not(.myclass) {
color: red;
font-size: 15px;
}This will apply CSS styles to all ‘p’ elements, excluding the elements of a specified class called ‘.myclass’.
How Not Selector Works in CSS?
When we are working with CSS :notselector, it does not match all the elements excluded from the CSS application. The CSS:not selector statement possible value element name, class name, Id name, or value attributes surrounding by opening and closing square brackets. Like other pseudo-elements and selectors of pseudo-class, we can work with the :not selector to other pseudo-classes and pseudo-elements.
Examples of CSS Not Selector
Now, we will see some of the examples by using:not selector as shown below:
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS :not Selector Example </title>
<style>
p:not(.mytext) {
color:#ff0000;
text-decoration: underline;
font-size: 20px;
}
</style>
</head>
<body>
<h2> :not Selector Example </h2>
<br>
<p> Java is a highly object-oriented, platform-independent and secure programming language. </p>
<p> Python is widely used, popular, high level, interpreted general-purpose programming language. </p>
<p class="mytext"> HTML is abbreviated as Hyper Text Mark up Language the most expanded language used worldwide to display the result in the web pages. </p>
</body>
</html>Output:
In the above example, we have used not a selector for ‘.mytext’ class. First, two paragraphs will have the CSS styles specified in this class. The line which is defined with the ‘.mytext’ class, will not have the CSS styles as it is defined as not to select the last line and should not apply styles for that paragraph.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS :not Selector Example </title>
<style>
button:not([DISABLED]){
color:orangered;
border: 2px solid green;
}
</style>
</head>
<body>
<h2> :not Selector Example </h2>
<br>
<button> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) </button>
<button disabled="disabled"> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) </button>
</body>
</html>Output:
In the above example, we are using button-type properties. One one-button is enabled, and another one is disabled. The not selector has been applied to the button with disabled attributes. The CSS styles will be applied to another button except for the disabled button. The other button will have the text in orange-red color along with the green color border.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS :not Selector Example </title>
<style>
label:not(.radio_class) {
font-weight: bold;
display:block;
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h2> :not Selector Example with Form </h2>
<br>
<form method="post" action="#">
<p>
<label for="name"> Enter the Name: </label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email"> Enter the Email-ID: </label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="number"> Enter the Mobile Number: </label>
<input type="number" id="number" name="number">
</p>
<p>
<label for="address"> Enter the address: </label>
<input type="address" id="address" name="address">
</p>
<legend> Select Gender </legend>
<p>
<input type="radio" id="male" name="radio_demo">
<label for="male" class="radio_class"> Male </label>
<input type="radio" id="female" name="radio_demo">
<label for="female" class="radio_class"> Female </label>
</p>
<button type="submit">Submit</button>
</form>
</body>
</html>Output:
In the above example, we are displaying the form along with the not selector. The gender section has a label that is specified with the not selector. These labels will not have the defined CSS styles as it is specified with the not selector. Apart from labels, the remaining elements will have styles including text color as blue, font size with 20px, and font weight with bold.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS :not Selector Example </title>
<style>
li:not(.mylist) {
color: red;
font-size: 15px;
font-weight: bold;
line-height:2;
}
</style>
</head>
<body>
<h2> :not Selector Example with List </h2>
<br>
<ul>
<li> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) </li>
<li> EDUCBA is a leading global provider of skill based education </li>
<li class="mylist"> It is online learning model along with amazing 2500+ courses </li>
<li> It provides job oriented hands-on courses available to anyone, anytime and anywhere </li>
</ul>
</body>
</html>Output:
In the above example, we have used the not selector with the ordered list. The ‘mylist’ class will define CSS styles for ordered list elements.
Conclusion
So far, we have studied not selector and examples in the different scenarios. The :not selector matches an item not identified with the argument. The moved argument does not include specific selectors or any selectors with pseudo-elements. The :not selector will be supported only by modern browsers such as Chrome, Firefox, Safari, Internet Explorer 9+, and Opera.
Recommended Articles
This is a guide to CSS Not Selector. Here we also discuss the definition and how not selector works in css? along with a different example and its code implementation. You may also have a look at the following articles to learn more –
