Definition of CSS Not Selector

The CSS pseudo-class called the :not Selector describes the elements which don’t suit a selector list. For CSS, the:not selector accepts a single selector as an argument and then combines one or more elements which are not defined by the argument. Assume we want an item to be selected when it has not a certain class. There seem to be no logical combinators with :not selector, but they can be combined as effectively as ‘and’.

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 that are excluded from CSS application. The CSS:no selector statement possible value element name, class name, Id name, or value attributes surrounding by opening and closingsquare brackets. We could also use globally the:notselector without adding it to an element, collecting all elements in a document that aren’t included in the argument. 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:











:not Selector Example

Output:

In the above example, we have used not a selector for ‘.mytext’ class. Here, first, two paragraphs will have the CSS styles as 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:











:not Selector Example

Output:

In the above example, we are using button type properties. The one-button is enabled and another one is disabled. The not selector has been applied to the button which has a disabled attributes. The CSS styles will be applied to another button except the disabled button. The other button will have the text in orangeredcolor along with the green color border.

Example #3

Code:











:not Selector Example with Form

Output:

In the above example, we are displaying the form along with the not selector. The .radio_class has been used to define the CSS styles for the form elements. The gender section has a label which 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:











:not Selector Example with List

Output:

In the above example, we have used the not selector with the ordered list. The ‘mylist’ class will be used for defining CSS styles for ordered list elements. The not selector will not style the respective sentence as defined in the CSS and other list elements will be styled with red color, 15px of font size, font weight as bold and line height will be 2.

Conclusion

So far, we have studied not selector along with 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 –

1. CSS overflow-wrap
2. CSS in React
3. CSS background-clip
4. CSS Text Color

The post CSS Not Selector appeared first on EDUCBA.