Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Not Selector

CSS Not Selector

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


CSS :not Selector Example

:not Selector Example

Java is a highly object-oriented, platform-independent and secure programming language.

Python is widely used, popular, high level, interpreted general-purpose programming language.

HTML is abbreviated as Hyper Text Mark up Language the most expanded language used worldwide to display the result in the web pages.


CSS Not Selector-1.1

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


CSS :not Selector Example

:not Selector Example


CSS Not Selector-1.2

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


CSS :not Selector Example

:not Selector Example with Form

Select Gender



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


CSS :not Selector Example

:not Selector Example with List

  • EDUCBA (Corporate Bridge Consultancy Pvt Ltd)

  • EDUCBA is a leading global provider of skill based education

  • It is online learning model along with amazing 2500+ courses

  • It provides job oriented hands-on courses available to anyone, anytime and anywhere



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.


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.

This post first appeared on Best Online Training & Video Courses | EduCBA, please read the originial post: here

Share the post

CSS Not Selector


Subscribe to Best Online Training & Video Courses | Educba

Get updates delivered right to your inbox!

Thank you for your subscription