What does not () do in css?

Question

The CSS3 :not() selector

CSS & HTML, 25 August 2008, 2 minute read

Table of Contents Show

The CSS3 :not() selector
The Specification
The browsers
Is () CSS pseudo class?
Which character is not used in CSS?
Which of the following is not a selector in CSS?
Can you chain not CSS?

There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

The Specification

The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.

What it says here, is that a selector with a :not() in it will match all elements that do not match what’s between the parenthesis.

A simple selector is a term used in the specifications. A simple selector is: a single element, attribute selector, class, id or pseude-class.

Examples of simple selectors:

body
*
[value="foo"]
.foo
#foo
:hover

Basically, any of the above type, but with only one selector.

The browsers

The :not() selector is only supported by modern browsers (Firefox, Safari and Opera), :not(IE).

Let’s take a look at what browsers allow you to do:

div:not(.home) {…}

This selects all div elements that do not have the class .home

div *:not(p) em {…}

This selects all em elements that are in an element (that is not a p element) and that are in a div element. so <div><strong><em>…</em></strong></div> is a match, but <div><p><em>…</em></p></div> is not.

input:not([type="file"]) {…}

This uses the attribute selector to select all input element, save for the file upload ones.

Do you want a better understanding of your own CSS selectors? Then check out the CSS specificity calculator that explains your selectors.

You can use the :not() selector as a part of a large selector. I’ve done this a few times in my current design:

li:not(.pingback) .comment-content p:first-child:first-line {…}
body:not(.home) h2 + p:first-letter {…}
.post:not(.first-post) a:hover {…}

The :not() selector is a nice addition to the CSS Tookit, and it can already be used in a way that allows for graceful degradation, such as I do on this website. If you have any nice experiences with :not(), please share them in the comments!

View Discussion

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

Often we encounter a situation in front-end web development where we have a number of elements in HTML and we need to give a specific style to just the last element or to every element except the last element or basically to that element which cannot be selected directly. There comes the use of pseudo selectors.
This article explains the :not(:last-child):after selector. This selector does not select the element after the last child element. It is mostly used to add the content after every child element except the last.
Example 1: This example creates a simple div element. It does not uses :not(:last-child):after selector.

html

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

outline: 1px solid;

margin: 10px;

box-shadow: 0 0 5px black;

background: green;

font-family: 'Segoe UI', sans-serif;

display: flex;

flex-direction: column;

justify-content: space-around;

align-items: center;

}

.inner-div {

width: 90%;

height: 45%;

background: white;

margin: 0 auto;

padding-left: 2px;

}

</style>

</head>

<body>

<div class="div">

<div class="inner-div"></div>

</div>

<div class="div">

<div class="inner-div"></div>

</div>

<div class="div">

<div class="inner-div"></div>

</div>

</body>

</html>

Output:

Example 2: After applying the pseudo selector :not(:last-child):after to the above example.

html

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

outline: 1px solid;

margin: 10px;

box-shadow: 0 0 5px black;

background: green;

font-family: 'Segoe UI', sans-serif;

display: flex;

flex-direction: column;

justify-content: space-around;

align-items: center;

}

.inner-div {

width: 90%;

height: 45%;

background: white;

margin: 0 auto;

padding-left: 2px;

}

.div .inner-div:not(:last-child):after {

content: 'not in the bottom div';

}

</style>

</head>

<body>

<div class="div">

<div class="inner-div"></div>

</div>

<div class="div">

<div class="inner-div"></div>

</div>

<div class="div">

<div class="inner-div"></div>

</div>

</body>

</html>

Output:

Explanation:

.div .inner-div: Selects all the elements with class ‘inner-div’ inside elements with ‘div’ class. Here, all three divs have class ‘div’ with two children divs with class ‘inner-div’. It selects all six div element with class name ‘inner-div’.
:not(:last-child)
- The :not() selector excludes the element passed to it from selection.
- The :last-child selector selects the last child.
- Combining these two above selector to excludes the last children (inner-div) of every parent div from the selection.
:after This is a great selector to add content (or sometimes, even block-level elements) after the selected elements (Here the first inner-div in every set of inner-divs). So, the content ‘not in the bottom div’ is indeed only added in the top div and not in the bottom div.

Example 3:

html

<!DOCTYPE html>

<html>

<head>

<style>

li:not(:last-child):after {

content: ' || ';

color:green;

font-weight:bold;

}

li {

display: inline;

}

</style>

</head>

<body style="text-align:center;">

<h2 style="color:green;">GeeksforGeeks</h2>

<h3>CSS :not(:last-child):after Selector</h3>

<div>GeeksforGeeks Subjects</div>

<ul>

<li>Data Structure</li>

<li>Algorithm</li>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</body>

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Is () CSS pseudo class?

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

Which character is not used in CSS?

An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS.

Which of the following is not a selector in CSS?

Q.	Which is not the selector type of CSS?
B.	Universal selector
C.	Class selector
D.	Element selector
Answer» b. Universal selector

[Solved] Which is not the selector type of CSS? - McqMatemcqmate.com › discussion › which-is-not-the-selector-type-of-cssnull

Can you chain not CSS?

There are no logical combinators with :not() , like and or or , but you can chain them, which is effectively like and . The :not() selector doesn't add any specificy by itself, but what is inside does, so :not(.