Learn the partial version of CSS Selector Level-4

1 overview

1.1 introduction

Selectors are a core component of CSS. This article provides a summary of most Selectors at Level1 to Level4 using the W3C Selectors Level4 specification, along with simple syntax explanations and examples. Hope to be helpful to programmers.

Element selector

2.1 Type selector -h1

A type selector, also known as a tag name selector, selects instances of elements of that type in the document.

h1 {
    color: red;
}
Copy the code

Set the color of the element type H1 in the document to red.

View sample programs

2.2 Wildcard selector -*

A generic selector is a special type selector that represents an element of any element type.

* {
    color: red;
}
Copy the code

Sets the color of all elements in the document to red.

3 Property selector

3.1 Attribute Existence selector -[name]

h1[name] {
    color: red;
}
Copy the code

Select the element with the attribute name in element h1.

View sample programs

3.2 Attribute value selector

3.2.1 Exact Match -[title=’cool’]

h1[title='cool'] {
    color: red;
}
Copy the code

Matches the element h1 that contains the attribute title and whose value is cool.

View sample programs

3.2.2 includes matching – [title | = ‘cool’]

h1[title~='cool'] {
    color: red;
}
Copy the code

The matching element h1 contains the attribute title and the attribute value contains cool.

View sample programs

3.2.3 Header Matching -[title^=’cool’]

h1[title|='cool'] {
    color: red;
}
Copy the code

The matching element h1 contains the attribute title, and the attribute value is either a cool element or an element beginning with cool-.

View sample programs

3.3 Attribute value substring selector

3.3.1 Header Matching -[title^=’cool’]

h1[title^='cool'] {
    color: red;    
}
Copy the code

The match element h1 contains the attribute title and the attribute value string begins with cool.

View sample programs

3.3.2 Tail Matching -[title$=’cool’]

h1[title$='cool'] {
    color: red;    
}
Copy the code

The match element h1 contains the attribute title, and the attribute value string ends in cool.

View sample programs

3.3.3 Partial Matching -[title*=’cool’]

h1[title*='cool'] {
    color: red;    
}
Copy the code

The match element h1 contains the attribute title, and the attribute value string contains elements of the cool substring.

View sample programs

3.4 Class selector -.class

.red {      
    color: red;       
}
Copy the code

Matches the element in the document whose class attribute is red and sets its color to red.

View sample programs

3.5 ID selector -# ID

#title {      
    color: red;       
}
Copy the code

Matches the element in the document whose ID attribute is title and sets its color to red.

View sample programs

4. Linguistic pseudo-classes

4.1 Directional pseudo-class :dir

Dir () is used to match elements that conform to a certain direction, such as dir(LTR) and dir(RTL), where LTR is short for left to right, and RTL is right to left, which means right to left.

:dir(ltr) {
    color: red;
}
Copy the code

Matches elements whose text orientation is left to right.

View sample programs

4.2 Language pseudo-class :lang

:lang(fr) {
    color: red;
}
Copy the code

Match elements whose language is French and set their color to red.

View sample programs

5 Positional pseudo-classes

5.1 Hyperlink pseudo-class :any-link

Matches elements such as , ,

with href attributes.

:any-link {
    color: red;
}
Copy the code

Matches any hyperlink and sets its color to red.

View sample programs

5.2 Hyperlink pseudo-class :link

:link {
    color: red;
}
Copy the code

Matches hyperlinks that are not accessed and sets their color to red.

5.3 Hyperlink pseudo-class: Visited

:visited {
    color: blue;
}
Copy the code

Matches the hyperlinks visited and sets their color to blue.

View sample programs

5.4 Hyperlink pseudo-class :local-link

:local-link {
    color: red;
}
Copy the code

Matches the local hyperlink and sets its color to red.

5.5 Target pseudoclass: Target

< h1 > < a href = "# content" > 30 lessons < / a > < / h1 > < p id = "content" > programmer notebook < / p > < p id = "content2 >" programmer's notebook 2 < / p >Copy the code

:target {
    color: red;
}
Copy the code

Click the internal link in the HTML code, and the color of the P element whose target object id is Content changes to red.

6 User behavior pseudo class

6.1 User behavior pseudo-class :hover

Matches the specified element when the user pointer device hovers over it.

:hover {
    color: red;
}
Copy the code

The user pointer hovers over an element, matches it and sets its color to red.

View sample programs

6.2 User Behavior pseudo class :active

:active {
    background: red;
}
Copy the code

Sets the element background color to red when a particular element is active.

View sample programs

6.3 User Behavior pseudo class: Focus

:focus {
    background: red;
}
Copy the code

When a particular element gets focus, set the element background color to red.

View sample programs

6.4 User Behavior pseudo-class :focus-within

div:focus-within {        
    border : 1px solid blue;
}
Copy the code

When a child element in a div gets input focus, set the border of the div element to a blue border with a 1 pixel value.

View sample programs

7 Timeline pseudo class

7.1 Time pseudo class :current

Timeline pseudo-classes are often used during voice rendering of documents or during captioning.

:current(p) {
    color: red;
}
Copy the code

The above rule defines the color of the current speech rendering paragraph to be red.

7.2 Time pseudo-class :past

:past(p) {
    color: red;
}
Copy the code

The above rule defines the color blue to complete the speech rendering paragraph.

7.3 Time pseudo class: Future

:future(p) {
    color: yellow;
}
Copy the code

The above rule defines the color yellow for unrendered paragraphs.

8 Resource status pseudo class

8.1 Resource status pseudo class: Playing

:playing {
    border : 1px solid red;
}
Copy the code

Matches the element in the current play state and adds a 1-pixel red border to it.

8.2 Resource status pseudo class: Paused

:playing {
    border : 1px solid grey;
}
Copy the code

Matches the element in the current play state and adds a 1 pixel gray border to it.

9 Enter a pseudo class

9.1 Entering the status control pseudo class enabled

:enabled {
    color: red;
}
Copy the code

Matches the enabled element and sets its color to red.

9.2 Input status control pseudo class: Disabled

:disabled{
    color: yellow;
}
Copy the code

Matches the element in the disabled state and sets its color to yellow.

View sample programs

9.3 Read-only pseudo-classes :read-only

:read-only {
    color: red;
}
Copy the code

Matches elements in read-only state and sets their color to red.

9.4 Read/write Pseudo-classes :read-write

:read-write {
    color: yellow;
}
Copy the code

Matches the read/write state of the element and sets its color to yellow.

View sample programs

9.5 pseudo class: placeholder – to

:placeholder-shown {
    background: red;
}
Copy the code

Select the element whose placeholder is to show its status and set its background color to red.

View sample programs

9.6 Default Item Pseudo-class :default

:default {
    color: red;
}
Copy the code

Match the default element and set its color to red.

View sample programs

9.7 Checked item pseudo-class: Checked

:checked {
   height: 4em;
}
Copy the code

Matches the selected element and sets its height to 4em.

View sample programs

9.8 Uncertain value pseudo-classes :indeterminate

Indeterminate value pseudo-classes: Indeterminate applies to elements whose value is in an indeterminate state. For example, the radio element group is in an indeterminate value state if it has not been initially selected.

:indeterminate {
  height: 4em;
}
Copy the code

Match the indeterminate value element and set the height to 4em.

View sample programs

9.9 Null pseudoclass :blank

Null pseudoclass: Blank is used to match an input field with an empty value, such as a textarea or input field.

:blank {
    background: red;
}
Copy the code

At present, the pseudo class has poor compatibility.

9.10 Compliance Verification Pseudo class :valid

:valid {        
    color: red;       
}
Copy the code

Matches elements whose input values are valid and sets their color to red.

9.11 Compliance verification Dummy class :invalid

:valid {        
    color:  blue;       
}
Copy the code

Matches elements whose input values are invalid and sets their color to blue.

View sample programs

9.12 Range pseudo-class :in-range

:in-range {
   color: red;        
}
Copy the code

Matches elements whose input values are within the defined range and sets their color to red.

9.13 Range pseudo-class :out-of-range

:out-of-range {
   color: blue;        
}
Copy the code

Matches elements whose input values are outside the definition range and sets their color to blue.

View sample programs

9.14 Mandatory Pseudo class: Required

:required {            
    color: red;        
}
Copy the code

Matches the elements defined as required and sets their color to red.

9.15 Optional item Pseudoclass :optional

:optional {            
    color: blue;        
}
Copy the code

Matches the element defined as an option and sets its color to blue.

View sample programs

10 Tree structure pseudo class

10.1 Root pseudoclass :root

Pseudo class :root represents the root element of the document. For example, in a DOM Document, the pseudo-class :root matches the root element of the Document object. In HTML, it represents an HTML element.

:root {
    color: red;
}
Copy the code

Match the document root element and define its color as red.

View sample programs

10.2 Empty pseudo-class :empty

:empty {           
    color : red;
}
Copy the code

Matches the empty element and sets its color to red.

View sample programs

10.3 Element index pseudoclass :nth-child

p:nth-child(3n+1) {
    color: red;
}
Copy the code

Match p elements 1,4,7,10 and set their color to red.

View sample programs

10.4 Element index pseudo-class :nth-last-child

p:nth-child(3n+1) {
    color: red;
}
Copy the code

Matches the last p elements, such as 1, 4, 7, and 10, and sets their color to red.

View sample programs

10.5 First element pseudo-class :first-child

p:first-child { 
    color: red;      
}
Copy the code

Matches the first p element and sets its color to red.

View sample programs

10.6 Tail element pseudo-class :last-child

p:last-child { 
    color: red;      
}
Copy the code

Matches the last p element and sets its color to red.

View sample programs

10.7 Only Child pseudo-class :only-child

p:only-child { 
    color: red;      
}
Copy the code

Matches element P whose parent element contains only one child element and sets its color to red.

View sample programs

10.8 Type Index pseudo-class :nth-of-type

p:nth-of-type(3n+1) {        
    color: red;      
}
Copy the code

Matches elements at index positions 1,4,7,10, etc. of type p and sets their color to red.

View sample programs

10.9 Type index pseudo-class: nTH-last-of-type

p:nth-last-of-type(3n+1) {        
    color: red;      
}
Copy the code

Matches the elements of the penultimate index position 1,4,7,10, etc. of type p and sets their color to red.

View sample programs

10.10 Type first element pseudo-class :first-of-type

p:first-of-type {        
    color: red;      
}
Copy the code

Matches the first element of type P and sets and color to red.

View sample programs

10.11 Type last-element pseudo-class :last-of-type

p:last-of-type {        
    color: red;      
}
Copy the code

Matches the penultimate element of type P and sets and color to red.

View sample programs

10.12 Pseudo-classes of Unique elements :only-of-type

p:only-of-type {        
    color: red;      
}
Copy the code

Match parent elements that contain only children of type P and set their color to red.

View sample programs

11 Logical combination selector

11.1 Group selector

h1 {  color: red }
h2 {  color: red }
h3 {  color: red }
h4 {  color: red }
Copy the code

Using grouping selectors, you can abbreviate the CSS rules described above into the following form.

h1.h2.h3.h4 {  
    color: red 
}
Copy the code

The two notations have the same effect.

11.2 Logical Combination pseudo-class: IS

Pseudoclass :is() is a function that takes multiple selectors as arguments, matching elements represented by their arguments.

Current compatibility is poor.

*:is(:hover.:focus) {
    color: red;
} 
Copy the code

Match elements of the pseudo-classes Hover and Focus and set their color to red.

11.3 Logical Combination pseudo-class: NOT

Negative logical composition pseudo-class :not() is a function that takes multiple selectors as arguments and matches elements not in its argument list.

Current compatibility is poor.

button:not([DISABLED])  {
    color : red;
}
Copy the code

Matches the button element that does not contain the DISABLED attribute and sets its color to red.

11.4 Logical Combination pseudo-class: HAS

Current compatibility is poor.

a:has(> img)  {
    border : 1px solid red;
}
Copy the code

Matches the hyperlink that contains the img child and sets its border to 1 pixel red.

12 Combination selectors

12.1 Descendant selector

h1 em {
    color: red;
}
Copy the code

Match the em element of the descendant of h1 and set its color to red.

View sample programs

12.2 Child Element Selector ->

h1 > em {  
    color: red;
}
Copy the code

Match the child element em of H1 and set its color to red.

View sample programs

12.3 Neighboring sibling selectors -+

h1 + h2 {
    color: red;
}
Copy the code

Matches h1’s adjacent sibling h2 and sets its color to red.

View sample programs

12.4 Sibling Selectors -~

h1 ~ h2 {
    color: red;
}
Copy the code

Match the sibling h2 after h1 and set its color to red.

View sample programs

13 the ending

13.1 References

W3C Working Draft : Selectors Level 4 – 21 November 2018

W3scool: CSS selector reference manual

Rookie tutorial: CSS selector

MDN : CSS Selectors

13.2 conclusion

This article is based on the CSS selector specification 4 selected partial CSS selector content written by @Morui. Because my level is limited, understanding and translation inevitably have deviation and error, but also ask programmer friends to correct!

The compatibility of some selectors in this paper is poor, so they can only be used as learning reserves and are not applicable to practical products.

Laborious original is not easy, please reprint must clearly indicate the source from [thirty lessons]!