How to use CSS selectors for non-inclusive selection

CSS is a very powerful style sheet language that can be used to control the appearance and layout of HTML documents. In CSS, a selector is a pattern for selecting HTML elements. Use selectors to easily change the style of elements in your document to achieve the desired effect. In CSS, sometimes you need to select some elements but exclude other elements. This article will introduce how to use CSS selectors to perform exclusive selection.

Why do we need to exclude selection?

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

CSS Select Not Contained Methods

There are many types of CSS selectors, several of which can be used for elements not included by the selector. This article will introduce the following common situations.

1. Negative pseudo-class selector

Negative pseudo-class selector can select all elements except a certain element. Normally, we use the :not() selector form.

Specific syntax:

:not(selector) {}

selector refers to the elements to be excluded.

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

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

In this example, we use:not The () selector excludes all p elements with class name hide. In this way, the text color of all p elements will become red, but the color of the p element of hide class will not change.

2. Children combined with pseudo-class selectors

You can use descendant elements combined with pseudo-class selectors to select all elements under a certain element, but exclude specific ones. element.

Specific syntax:

selector :not(selector) {}

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

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

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

3. Universal selector

The universal selector (*) can select all elements, but we can combine it with other selectors to exclude some elements with the universal selector. For example, we want to style elements with a specific class of 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 use the :not() selection selector, universal selector, and class selector to exclude all elements with class foo. In this way, we only style all elements with class box except foo class.

Summary

In actual development, we often need to exclude certain elements to meet specific style requirements. In this article, we introduced three ways to select elements that do not contain:

• Use the negated pseudo-class selector: not()
• Use descendant elements combined with the pseudo-class selector :not()
• Use universal selector (*)

The above methods can be used to control the style of HTML elements to achieve different effects. We can be flexible as needed use.

The above is the detailed content of How to use CSS selectors for non-inclusive selection. For more information, please follow other related articles on the PHP Chinese website!