Html pseudo class not

CSS :not() Pseudo Class

The :not() pseudo-class represents elements that do not match a list of selectors.

It is also known as the negation pseudo-class. It is a functional pseudo-class selector that takes a simple selector as an argument and matches with one or more elements not being represented by the argument.

The :not() selector takes as an argument any of the following:

• Type selector (e.g p, span, etc.)
• Class selector (e.g .element etc.)
• ID selector (e.g #header)
• Pseudo-class selector (e.g :last-child, :first-of-type)
• Attribute selector (e.g [type=»text»])
• The universal selector (*)

Important Notes

• The :not selector does not work with pseudo selectors attached to the different elements which are doing pseudo selection.
• Useless selectors can be written with the :not selector.
• The :not selector can increase the specificity of a rule.
• The:not(.foo) matches anything that isn’t .foo, (including and ).
• The :not selector only applies to one element.
• If you use the :not() without applying it to just one element, it will select all elements in a document that are not represented in the argument.

Version

Syntax

Example of the :not() pseudo-class:

html> html> head> title>Title of the document title> style> p < color: #666; > :not(p) < color: #8ebf42; > style> head> body> h2>:not() selector example h2> p>Lorem Ipsum is simply dummy text p> p>Lorem Ipsum is simply dummy text p> div>Lorem Ipsum is simply dummy text div> a href="https://www.w3docs.com" target="_blank">Link to W3docs a> body> html>

In the following example, there is an unordered list with a single class on the tag.

html> html> head> title>Title of the document title> style> .text-blue < color: blue; > ul li:not(.text-blue) < color: #8ebf42; > style> head> body> h2>:not() selector example h2> ul> li>List item 1 li> li class="text-blue">List item 2 li> li>List item 3 li> ul> body> html>

Источник

How :not() chains multiple selectors

In CSS rules, you normally select elements that you want to apply styles to and all matching elements get styled. Have you ever wanted to apply styles to only a few elements and exclude everything else? This is possible in CSS by using the :not() pseudo-class. In this post, we’ll take brief look at CSS pseudo-classes, how the :not() pseudo-class works, and how it behaves when multiple selectors are passed as an argument.

What are CSS pseudo-classes?

/* Select and style all list items */ li  color: aquamarine; > 

Pseudo-classes are keywords that you add to a selector. They let you style elements based on matching conditions other than by matching class or ID. So, by using a pseudo-class such as :required , you can target a form element based on whether or not it is required. A pseudo-class such as :first-child lets you select an element based on its position in the document tree. You can check out the complete list of pseudo-classes in CSS on MDN Web Docs.

One example of a commonly used pseudo-class is :visited that lets you style the links that have been visited by a user. This can be a neat way to also let users know the links they’ve already clicked.

/* Select and style visited links */ a:visited  color: lightgreen; > 

What is the :not() pseudo-class?

:not() is the negation pseudo-class that selects elements that match none of the specified selectors. So you use :not() to apply style to elements excluded by the specified selectors.

Let’s look at an example. Say you want to select and style all elements on a page, but you want to exclude these elements when they’re inside section headings. You can do this by using the :not() pseudo-class like this:

/* Style all code elements except those inside h2 elements */ code:not(h2 > code)  color: red; > 

As you can see, the :not keyword is added to the element selector ( ) and the not selector ( h2 > code ) is passed as an argument.

Negating a single selector

The Selectors Level 3 specification allowed only a single «simple selector» as an argument for :not() . So you could only style elements like this:

:not(.item__cost)  font-family: "Montserrat"; > 

In this example, all elements without the class .item__cost get the Montserrat font.

Negating multiple selectors

With Selectors Level 4, you can specify a «complex selector» as an argument for :not() and also pass multiple complex selectors in a comma-separated «selector list». This is supported in browser versions starting from Chrome 88, Firefox 84, and Safari 9. Now you can use :not() like this:

/* Compound selector */ input:not(:required)  color: #919191; > 

All elements that are not required will be dark grey. You can also pass a comma-separated list like this:

/* Compound selector */ input:not(:required, [type="button"])  background-color: blue; > 

All elements that are not required and are not buttons will have a blue background.

To learn more about the differences between simple selectors, compound selectors, complex selectors, and selector lists, check out the Structure of a selector section in CSS selectors on MDN Web Docs.

Chaining multiple selectors

In CSS, when you want to apply the same style to multiple elements, you generally use a comma-separated selector list to group the selectors. This is illustrated below:

h1, h2, h3, h4, h5, h6  font-family: helvetica; > 

Similarly, you can group several :not() declarations in a comma-separated list of selectors to apply the specified styles only to excluded matching elements. The result is a style that applies to any element excluded by the :not() selector.

Let’s say we have a form where we want to style only the text fields that are editable. In the form in the example below, the field Employed is a menu option field, the Employment Date field has the type date , and the field Country has the attribute readonly . These are the fields that we want to exclude from styling and the ones we can target by using the :not() pseudo-class.

This is the HTML code for the above form where you can spot the attributes and type:

form> label for="name" class="name">Name:label> input type="text" id="name" name="name" value="Enter your name" /> label for="emp" class="emp">Employed:label> select name="emp" id="emp" disabled> option selected>Nooption> option>Yesoption> select> label for="empDate">Employment Date:label> input type="date" name="empDate" id="empDate" /> label for="country">Country:label> input type="text" name="country" id="country" value="United States" readonly /> label for="resume">Resume:label> input type="file" name="resume" id="resume" /> form> 

The desired styling can be achieved by using the :not() pseudo-class as shown in the CSS below. The lightyellow background color applies to all elements that do not have the disabled attribute or the readonly attribute or the type date . The result is the selection and styling of the fields Name , Employed , and Resume . Notice that even though the field Employed has the attribute disabled , it is not styled because it is a element.

label  display: block; margin-top: 1em; font-weight: bold; > 

input:not([disabled], [readonly], [type="date"])  background-color: lightyellow; color: red; > 

This is how :not() chains the multiple selectors.

Summary

To recap, use comma-separated selectors in the :not() pseudo-class to chain declarations for multiple selectors. I hope you found this post helpful. If you have questions or feedback, feel free to contribute to the GitHub discussion about this post. You can also drop in and say hello to us in the MDN Web Docs Discord server. Until next time, happy reading and building the web!

Previous Post New functions, gradients, and hues in CSS colors (Level 4)

Next Post Introducing Baseline: a unified view of stable web features

Stay Informed with MDN

Get the MDN newsletter and never miss an update on the latest web development trends, tips, and best practices.

Your blueprint for a better internet.

Источник

Html pseudo class not

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

Try it

The :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.

Syntax

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

Description

There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:

• Useless selectors can be written using this pseudo-class. For example, :not(*) matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
• This pseudo-class can increase the specificity of a rule. For example, #foo:not(#bar) will match the same element as the simpler #foo , but has the higher specificity of two id selectors.
• The specificity of the :not() pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written :not(:is(argument)) .
• :not(.foo) will match anything that isn’t .foo , including and .
• This selector will match everything that is «not an X». This may be surprising when used with descendant combinators, since there are multiple paths to select a target element. For instance, body :not(table) a will still apply to links inside a , since , , , , , etc. can all match the :not(table) part of the selector.
• You can negate several selectors at the same time. Example: :not(.foo, .bar) is equivalent to :not(.foo):not(.bar) .
• If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use :is() pseudo-class, which accepts a forgiving selector list. For example :not(.foo, :invalid-pseudo-class) will invalidate a whole rule, but :not(:is(.foo, :invalid-pseudo-class)) will match any (including and ) element that isn’t .foo .

p>I am a paragraph.p> p class="fancy">I am so very fancy!p> div>I am NOT a paragraph.div> h2> span class="foo">foo inside h2span> span class="bar">bar inside h2span> h2> 

.fancy  text-shadow: 2px 2px 3px gold; > /* 
elements that don't have a class `.fancy` */ p:not(.fancy)  color: green; > /* Elements that are not 
elements */ body :not(p)  text-decoration: underline; > /* Elements that are not s or `.fancy` */ body :not(div):not(.fancy)  font-weight: bold; > /* Elements that are not s or `.fancy` */ body :not(div, .fancy)  text-decoration: overline underline; > /* Elements inside an that aren't a with a class of `.foo` */ h2 :not(span.foo)  color: red; > 

p class="foo">I am a paragraph with .foop> p class="bar">I am a paragraph with .barp> div>I am a div without a classdiv> div class="foo">I am a div with .foodiv> div class="bar">I am a div with .bardiv> div class="foo bar">I am a div with .foo and .bardiv> 

/* Invalid rule, does nothing */ p:not(.foo, :invalid-pseudo-class)  color: red; font-style: italic; > /* Select all 
elements without the `foo` class */ p:not(:is(.foo, :invalid-pseudo-class))  color: green; border-top: dotted thin currentcolor; > /* Select all elements without the `foo` or the `bar` class */ div:not(.foo, .bar)  color: red; font-style: italic; > /* Select all elements without the `foo` or the `bar` class */ div:not(:is(.foo, .bar))  border-bottom: dotted thin currentcolor; >