[CSS] Pseudo-class: How to use not()?

By using the CSS pseudo-class: not(), you can apply styles to other than the specified selector.

The way it is used is unique, and many people may say, “I don’t know how to specify it” or “The settings aren’t reflected well.”

It’s a convenient pseudo-class, so you want to understand it properly rather than leaving it vague.

This time, for those who want to master the CSS pseudo-class: not(),

I will explain according to the above items.

Read this article to learn how to properly use the CSS pseudo-class: not() .

Please read to the end!

What is a pseudo-class?

What exactly are pseudo-classes?

Pseudo-classes specify the position or state to which you want to apply a style .

In terms of states, :hover and :checked by mouse operation are well known.

:hover specifies the style when the link is hovered as follows.

a:hover {
  color: orange;
}

:checked is a pseudo class that allows you to specify the style of the checked state of checkboxes and radio buttons.

Also, the position specification includes :first-child, which specifies the first element.

:not() is also a pseudo-class similar to these.

What is pseudo-class:not()? how to use

:not() is used when you want to style elements other than specific selectors in CSS .

Basically, when you apply a style to an element, you write it like this:

p {
  color: green;
}

This will make the character color of the p element green.

By enclosing this element with :not(), you can specify styles other than the p element.

:not(p) {
  color: green;
}

The p element is excluded, and the letters of other elements are green.

It is also called a negation pseudo-class because it excludes certain elements like this.

:not() can enter classes, ids, attributes, etc. in addition to the above elements.

Notes on using :not()

:not() does not work like programming, so depending on how it is written, the expected result may not be obtained or it may be invalid.

Here, I will explain “what you can’t do with :not()” and “precautions when using it” .

If it doesn’t work even though you intended to specify it with :not(), check if you made any of the following mistakes.

cannot be nested

:not() cannot be nested.

Do not write the code below as it will not work.

:not(:not(p)){
  color: green;
}

Only available for simple selectors

:not() can only use simple selectors like this :

However, the following specification using a universal selector is meaningless code because it specifies an element that is not an element.

:not(*) {
  color: green;  
}

Also, it cannot be applied to pseudo-elements.

Note that the following description will not work.

:not(p::before){
  background: skyblue;
}

Don’t write multiple selectors together

Writing multiple comma-separated selectors inside :not() is deprecated .

:not(.sample1, .sample2, p){
  background: skyblue;
}

Originally it was a specification that was not supported, but it has come to work in some browsers.

However, it is not widely used yet, and it is not guaranteed to work, so it seems better not to use this method.

Consider your scope

Also note the scope of :not().

You might end up writing something like the following when excluding links in a table:

However, do not write such a specification as it does not exclude links within the table.

:not(table) a {
    background: skyblue;
}

Although the table element is excluded, the tr element in it is included in “other than the table element”, so the a element in it has a background color.

If you do not understand this mechanism, it may not be displayed as expected, so be sure to remember it properly.

Sample code using :not()

I have introduced how to use :not() and points to note.

Let’s take a look at some sample code to see how it’s actually used.

excluding elements

You can exclude certain elements .

<div>
<h2></h2>
<p></p>
<p></p>
<a href="#"></a>
<h2></h2>
<p></p>
<p></p>
<h3></h3>
<p></p>
<div>

div :not(p) {
  background: #ffae8a;
}

With this, I was able to change the background color of anything other than the p element.

With only “:not(p)”, html and body are included, so the overall background color will change.

As mentioned above, when specifying the background color using :not(), it is necessary to write up to the parent element.

Exclude elements with specific id, class

You can exclude specific ids and classes .

<ul>
  <li>1</li>
  <li class="sample1"></li>
  <li>3</li>
  <li id="sample2">4</li>
  <li>5</li>
</ul>

li:not(.sample1) {
  color: #66ccff;
}
li:not(#sample2) {
  background: #ffae8a;
}

Can you confirm that the text is blue except for the ones with the class name, and the background is orange except for the ones with the id name?

As will be described later, if the number of the element to be excluded is determined, it is also possible to specify the order.

Exclude elements with specific attributes

Elements with specific attributes can be excluded.

<p title="test">title</p>
<p>title</p>
<p>title</p>
<p title="test">title</p>
<p>titleなし</p>

p:not([title]) {
  color: #fa8072;
}

The characters except the p element with the title attribute specified will be red.

It is also possible to specify attribute values ​​as follows:

<form action="#">
<label>名前：<input type="text" name="name"></label>
<label>：<input type="email" name="email"></label>
<label>：<input type="password" name="pass"></label>
<input type="submit" value="送信">
<input type="reset" value="">
</form>

label {
  display: block;
}
label input:not([type="text"]) {
  background: #CCC;
}

The style is specified for the elements excluding “type=”text”” among the input elements that are child elements of the label element.

Did you check that the background color of the input fields other than the name is gray?

Also, if you remove the label of the parent element in the CSS selector, the background of the submit and reset buttons will also be gray.

Try rewriting it and check the difference.

excluding pseudo-classes

:not() can be used to exclude a specific pseudo-class .

Here are some examples of using pseudo-classes.

Let’s explain each in detail.

Exclude mouseover

Mouseover means hovering the cursor over an element.

When you place the cursor on a button such as a send button, the color may change or the shape may change.

These actions can be specified with the pseudo-class :hover.

By combining this with :not(), you can specify the style when the mouse is not over .

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

li:not(:hover) {
  background: #ffae8a;
}

You can see that the background of the list item becomes orange, and when you hover over it, the color disappears.

If you want to remove the style instead of adding it on mouseover, please try this method as well.

except the first element

You can remove the first element using :not() and the pseudo-class :first-child.

In articles such as blogs, there are times when you make a margin above the title.

At this time, instead of specifying margins for h2 and h3, use :not() to make the design easier to see.

For example, for HTML code like

<section>
<h2></h2>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
</section>

h2:not(:first-child) {
  margin-top: 50px;
}

By doing this, the specification will not be applied to the h2 that comes first.

This is useful if you don’t need to open a margin above the first title.

By using first-child instead of first-of-type, you can handle when an element other than h2 comes at the beginning of the section element.

<section>
<p></p>
<h2></h2>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
</section>

first-of-type refers to the first h2 element, not the first element.

So the h2 below the first text in the above code will have the white space removed.

We also want to remove the h2 margin, which is not the first element, so we make it first-child.

excluding the last element

Now try excluding the last element using :not() and the pseudo-class :last-child .

A common example is to remove the underline only for the last element of a list.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

In this example, you can implement it with the following CSS without using :not().

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li {
  border-bottom: 1px solid #CCC;
}
li:last-of-type {
  border-bottom: none;
}

To make it easier to understand, the size of the entire list is specified and surrounded by a border.

We are specifying underlining for the list items and using last-of-type to remove the underlining only for the last element.

It can be written concisely by using :not() as follows.

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li:not(:last-of-type){
  border-bottom: 1px solid #CCC;
}

Your code is clean.

Once specified, the method of specifying cancellation later tends to make the code complicated and difficult to manage.

We strongly encourage you to use these methods.

Please try various things.

excluding the nth element

Now let’s exclude the nth element using :not() and :nth-child() .

If there is only one element you want to exclude and you know the number, enter that number.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS is described as follows.

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li:not(:nth-child(5)){
  background: #ffae8a;
}

Now all elements except the 5th have a background color.

Put a formula in :nth-child()

You can also put a formula inside :nth-child() .

If you enter 3n as below, the elements except multiples of 3 are applied.

ul {
  width: 250px;
  margin: 0 auto;
  padding: 5px;
  list-style: none;
  border: 2px double #32cf5e;
}
li:not(:nth-child(3n)){
  background: #ffae8a;
}

“2n+1” or “odd” for odd numbers and “2n” or “even” for even numbers.

However, there is no need to use :not() in these two cases.

You can also enter formulas such as “3n+2”, so please try it.

Exclude multiple selectors

In the explanation of points to note, we talked about not using multiple selectors as shown below.

:not(.sample1, .sample2, p){
  background: skyblue;
}

It works in some browsers, but it’s not yet widely adopted, so it’s better to avoid such statements.

If you want to exclude multiple selectors, use the following method.

<div>
<h1>見出し</h1>
<p class="sample1">テキスト1</p>
<p>テキスト2</p>
<p class="sample2">テキスト3</p>
<span>テキスト4</span>
<p>テキスト5</p>
<p>テキスト6</p>
</div>

div :not(.sample1):not(.sample2):not(span) {
  background: #ffae8a;
}

As a result, elements with class names “sample1” and “sample2” and span elements are excluded.

Also in this case, if you forget to attach the parent element div, html and body will be included, and the background color of the whole will change, so be careful.

As an application, you can try writing the pseudo-classes that you have learned so far in :not().

Any number of :not()s will work, but don’t leave any spaces .

If you leave a space, the specification will be different from what you expected.

Try it out and see if it works properly.

Summary: Let’s use :not() positively

This time, we have explained in detail how to use the CSS pseudo-class: not().

I also introduced points to note when using it and practical sample code.

It may be difficult to get used to at first, but once you get used to it, it becomes a very convenient pseudo-class .