What are the CSS3 selectors types?

May 31, 2021 Article blog

What is a CSS3 selector? W hat are its types? W hat does it all do? This article is for you to answer one by one.

What is a CSS3 selector? F irst of all, to mention CSS3, it is the latest CSS standard, more than CSS style settings. S o there will be more new content on the CSS3 selector, making it easier and more efficient for you to create web pages. The selector is used for the effective control of one-to-one, one-to-many, or many-to-one elements, and the selector is used to apply styles to the corresponding elements and render their elements, so the CSS3 selector is a very important and basic knowledge point.

What are the types of CSS3 selectors? W hat does it all do? A s shown below, the selectors are diverse and can choose the one that works best for you according to your needs. The next thing is all about focus, take the little book and write it down.

What are the CSS3 selectors types?1

Here are the various selector property types and roles, click on the selector to go to the tutorial to learn more, you can also write examples online

1) Basic selector

selector	type	Description of the function
*	The selector is available	Select all HTML elements in the document
E	Element selector	Select the HTML element of the specified type
#id	ID selector	Select any type of element that specifies an ID property value of "id"
.class	Class selector	Select any number of elements of any type that specify a class property value of "class"
selector1,selectorN	Group Selector	Combine the elements that each selector matches and

2) Hierarchical selector

selector	type	Description of the function
E F	Descendant selectors (including selectors)	Select the matching F element, and the matching F element is included in the matching E element
E>F	The sub-selector	Select the matching F element, and the matching F element matches the child element of the E element
E+F	Adjacent brother selector	Select the matching F element, and the matching F element is immediately behind the matching E element
E~F	Universal selector	Select the matching F element and all matching F elements after the matching E element

3) Dynamic pseudo-class selector

selector	type	Description of the function
E:link	Link pseudoclass selectors	Select a matching E element, and the matching element is defined as hyperlinks that have not been accessed. Often used on linked strokes
E:visited	Link pseudoclass selectors	Select the matching E element, and the matching element is defined as hyperlinked and accessed. Often used on linked strokes
E:active	The user behavior selector	Select the matching E element, and the matching element is activated. Often used on linked strokes and buttons
E:hover	The user behavior selector	Select the matching E element, and the user mouse rests on element E. IE6 and the following browsers only support a: hover
E:focus	The user behavior selector	Select the matching E element, and the matching element gets the focus

4) Target pseudo-class selector

selector	Description of the function
E:target	Select all elements that match E, and the matching elements are pointed to by the relevant URL

5) Language pseudo-class selector

selector	Description of the function
E::lang(language)	Indicates that all elements that match E are selected, and that the matching element specifies a lang property with a value of language

6) UI element state pseudoclass selector

selector	type	Description of the function
E:checked	Check the status pseudo-class selector	Match the selected check button or radio button form element
E:enabled	Enable the state pseudoclass selector	Matches all enabled form elements
E:disabled	The state pseudoclass selector is not available	Matches all disabled form elements

7) Structural pseudo-class selector

selector	Description of the function
E:first-child	Element E, which is the first child element of the parent element. Equivalent to E:nth-child(1).
E:last-child	Element E, which is the last child element of the parent element. Equivalent to E:nth-last-child(1).
E:root	Select the root element of the document where element E is located. In an HTML document, the root element is always html, at which point the selector matches the html type selector
E F:nth-child(n)	Select the nth child element F of the parent element E. Where n can be an integer (1,2,3), the keyword (even, odd), can be a formula (2n1), and the n value starts at 1 instead of 0.
E F:nth-last-child(n)	Select the penultimate child element F of the parent element E. This selector is the exact opposite of the E:nth-child(n) selector calculation order, but is used in the same way, where: nth-last-child(1) always matches the last element, equivalent to last-child
E:nth-of-type(n)	Select the nth E element with the specified type within the parent element
E:nth-last-of-type(n)	Select the penultimate N E element with the specified type within the parent element
E:first-of-type	Select the first E element within the parent element with the specified type, equivalent to E:nth-of-type(1).
E:last-of-type	Select the last E element within the parent element with the specified type, equivalent to E:nth-last-of-type(1).
E:only-child	Select the parent element to contain only one child element, and the child element matches the E element
E:only-of-type	Select the parent element to contain only one child element of the same type, and the child element matches the E element
E:empty	Select an element that has no child elements, and the element does not contain any text nodes

8) Deny pseudo-class selectors

selector	Description of the function
E:not(F)	Matches all E elements except element F

9) Property selector

selector	Description of the function
[ attribute ]	Used to select an element with the specified property.
[ attribute = value ]	Used to select elements with specified properties and values.
[ attribute ~= value ]	The element used to select a property value that contains the specified vocabulary.
[ attribute \|= value ]	Used to select an element with a property value that begins with the specified value, which must be the entire word.
[ attribute ^= value ]	Match each element whose property value begins with the specified value.
[ attribute $= value ]	Match each element whose property value ends with the specified value.
[ attribute = value* ]	The matching property value contains each element of the specified value.

More pseudo-class selectors can be viewed by clicking on the CSS selector

What are the CSS3 selectors types?

Cookie Consent