How to use CSS selectors for non-inclusive selection

This article mainly introduces how to use CSS selectors for non-inclusive selection. The editor will show you the operation process through actual cases. The operation method is simple, fast, and practical. I hope this article how to use CSS selectors Do not include select articles can help everyone solve the problem.

Why do you need to not include options?

In actual projects, sometimes it is necessary to style the elements of an entire web application, but some specific elements must be excluded. In this case, the exclude selection is very useful to exclude those elements that are not needed, so that the styling is more realistic.

CSS Select Exclusion Methods

There are many types of CSS selectors, several of which can be used on elements that the selector does not contain. This article will introduce the following common situations.

1. Take the anti-pseudo-class selector

Take the anti-pseudo-class selector to select all elements except a certain element . Typically, we use the :not() selector form.

Specific syntax:

:not(selector) {}

selector refers to the element to be excluded.

For example, if we want to set the style of all p elements, but exclude specific p elements whose class is hide, the code is as follows:

p:not(.hide) { color: red; }

In this example, we use the :not() selector to exclude all p elements with class hide. This will change the text color of all p elements to red, but the p elements with the hide class will remain unchanged.

2. Children combine pseudo-class selectors

You can use descendant elements to combine pseudo-class selectors to select all elements under an element, but exclude specific elements within it.

Specific syntax:

selector :not(selector) {}

For example, we want to set the style of p elements inside all divs, but exclude The specific class is the p element of hide, the code is as follows:

div p:not(.hide) { color: red; }

In this example, we have used the :not() selector and descendant element selector to exclude all p elements with class name hide. In this way, the text color of the p element inside all div elements will turn red, but the color of the p element of the hide class will not change.

3. Universal selector

Universal selector (*) can select all elements, but we can Use a generic selector to exclude some elements in combination with other selectors. For example, if we want to style certain elements with class box, but exclude one of the elements with class foo, the code is as follows:

.box:not(.foo) { background-color: blue; }

In this example, we have used the :not() selector, the universal selector, and the class selector to exclude all elements with the class foo. This way, we only style all elements of class box except for foo .