What are the advanced selectors of CSS?

css advanced selectors include "universal sibling selector~", "attribute selector []", "pseudo-class selector: not()", "pseudo-class selector: nth-child()" , "Pseudo-class selector: nth-of-type()", "Pseudo-class selector: first-child and: last-child": 1. Universal sibling selector, selects the same parent element as the specified element, and All subsequent sibling elements; 2. Attribute selector, which can select elements based on their attribute values, etc.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

CSS advanced selectors provide a more refined and flexible way to select elements. The following are some common CSS advanced selectors:

1. General sibling selector (General sibling selector) : Use a tilde (~) to indicate that all sibling elements that have the same parent element as the specified element and follow it are selected.

h2 ~ p {       
        color: red;
       }

2. Attribute selectors: You can select elements based on their attribute values.

   • Attribute exists selector: [attr]
   • Equal to selector: [attr=value]
   • Contains selector: [attr~=value]
   • Beginning matching selector: [attr^=value]
   • Ending matching selector: [attr$=value]
   • Containing selector: [attr*=value]

3. :not() Pseudo-class selector: selects all elements except the specified element.

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

4. :nth-child() Pseudo-class selector: Select elements based on their position in the parent element.

p:nth-child(odd) {       
                   background-color: lightgray;
                 }

5. :nth-of-type() Pseudo-class selector: Similar to :nth-child(), but only matches elements of a specific type.

p:nth-of-type(2n+1) {       
                    font-weight: bold;
                   }

6. :first-child and :last-child pseudo-class selectors: select the first and last child elements respectively.

div p:first-child {       
                    font-weight: bold;
                  }

These advanced selectors can help developers select elements that need to be styled more accurately, thereby achieving more flexible and fine-grained style control.

The above is the detailed content of What are the advanced selectors of CSS?. For more information, please follow other related articles on the PHP Chinese website!