CSS3: Selector

The purpose of the CSS selector is to find out some kind of element so that we can use style elements or external style sheets to set styles on such elements.

Basic Selector
Selector

Selector	meaning	Demo Sample	Descriptive narrative
*	Select all elements	* {Border:thin Black solid;padding:4px}	Select all elements
< element types >	Select all instances of this element in a document	A {Border:thin black solid;padding:4px}	Select a element
.< class name > (or *.< class name >)	Specifies that the global property class is an element of the specified class	. class2 {Border:thin Black solid;padding:4px}	Selects all elements of the specified class2 type
< element type >.< class name >	Specifies that the global property class is a specific element of the specified class	Span.class2 {Border:thin Black solid;padding:4px}	Select the span element for the specified class2
< element type >.< class name 1>.< class name 2>	Specifies that the global property class specifies the elements of multiple classes, that is, the element that specifies the class name 1 and class name 2 at the same time	Span.class1.class2 {Border:thin Black solid;padding:4px}	Select the SAPN element that specifies Class1 and Class2 at the same time
#<id>	Select an element based on the value of the global property ID	#w3canchor {Border:thin Black solid;padding:4px}	Select an element with ID W3canchor
< element types >.#<id>	Select an element based on the ID value of the specified element type	span. #w3canchor {Border:thin Black solid;padding:4px}	Select a SPAN element with ID W3canchor
[< condition;] or < element type >[< condition;]	Elements that match attributes with the specified criteria	[href] {Border:thin Black solid;padding:4px}	Matches all elements that have an href attribute. See "Conditions for element property selectors"

conditions for element property selectors:
1) [attr]: Select the element that defines the Attr property, ignoring the property value.
2) [attr= "Val"]: Select the element that defines the attr attribute, and the attribute value is Val;
3) [attr^= "Val"]: Select Define Attr property. and the attribute value takes the element of the large head of the string Val;
4) [attr$= "Val"]: Select Define Attr property. and an element with the property value ending with the string Val.
5) [attr*= "Val"]: Select Define Attr property, and the attribute value includes the element of the string Val;
6) [attr~= "Val"]: Select Define Attr property. and the attribute value has multiple values, one of which is the Val element;
7) [attr|= "Val"]: Select Define Attr property. and the attribute value is a hyphen cut of multiple values, the first of which is the element of the string val.

Composite Selector

Selector

Selector	meaning	Demo Sample	Descriptive narrative
< selector 1>,< selector 2>,< selector 3>	The set of all elements matching the selector 1, selector 2, and selector 3	A,[lang|= "en"] {Border:thin black solid;padding:4px}	Select the A element and the element with attribute Lang, and the first attribute value is en
< selector 1> < selector 2>	Matches the element of selector 2 in the descendant element of the element that matches the selector 1	P span {Border:thin black solid;padding:4px}	Match the descendant span element of the P element
< selector 1> > < selector 2>	Matches the element of selector 2 in the direct descendant element (child element) of the element that matches the selector 1	Body > * > span, tr > th {border:thin black solid;padding:4px}	The span child element that matches the arbitrary child element of the BODY element, in the th child element that matches the TR element
< selector 1> + < selector 2>	The element that matches the element of selector 1, which is probably adjacent to the sibling element, that matches the selector 2	P + a {Border:thin black solid;padding:4px}	Match the A element immediately following the P element
< selector 1> ~ < selector 2>	The element that matches the element of selector 1 in the sibling element that matches the selector 2	P ~ a {Border:thin black solid;padding:4px}	A element after the P element is matched

Pseudo element Selector
Selector

Selector	meaning	Demo Sample	Description
:: First-line	First line of text content	:: first-line {Border:thin black solid;padding:4px}p::first-line {Border:thin black solid;padding:4px}	The first line of text that matches the P element
:: First-letter	The first letter of the text content	:: first-letter {Border:thin black solid;padding:4px}	Match the first letter of all text
: Before : After	Insert content before the contents of the selected element Insert content after the contents of the selected element	A:before {content: "Click here to"}a:after {content: "!"}	Insert content before and after the A element, respectively

Structural pseudo-Class selectors
Selector

Selector	meaning	Demo Sample	Description
: Root	Select the root element in the document. Always return HTML	: root {border:thin black solid;padding:4px}
: First-child	The first child element of a parent element	p > Span:first-child {border:thin black solid;padding:4px}	Match the first span child element of the P element
: Last-child	The last child element of the parent element	: last-child {Border:thin black solid;padding:4px}	Match all the last child elements
: Only-child	Matches the unique child element included by the parent element	: only-child {Border:thin black solid;padding:4px}	Match an element that has only one child element
: Only-of-type	All child elements that match a parent element with only one type of child element	: only-of-type {Border:thin black solid;padding:4px}

using the Nth-child selector: Nth-child (N): Select the nth child element of the parent element
: Nth-last-child (N): Selects the penultimate child element of the parent element
: Nth-of-type (N): Select the nth child element of the parent element definition type
: Nth-last-of-type (N): Select the reciprocal nth child element of the parent element definition type
UI pseudo-Class selector
Selector

Selector	meaning	Demo Sample	Description
: Enabled and: Disabled	Select an element that is enabled or disabled, which does not match an element without a disabled state	: Enabled {Border:thin black solid;padding:4px}	Match all enabled elements
: Checked	Select the radio button or check box selected by the Checked property or user	: Checked + span {Background-color:red;color:white;padding:5px;border:medium black solid;}	The span element directly adjacent to the selected element after matching the tick
:d Efault	Selects the default element in a set of similar elements. For example, the default button for submitting a button is always a form	:d efault {outline:medium solid red;}
: Value and: invalid	Match input elements that meet and do not conform to their inputs validation requirements, respectively	: Invalid {Outline:medium solid red;}:valid {outline:medium solid green;}
: In-range : Out-of-range	Matches an INPUT element that is within a specified range Matches an INPUT element that is outside the specified range	: in-range {Outline:medium solid green;}:o Ut-of-range {Outline:medium solid red;}	Note: only some browsers support
: Required : Optional	Match the input element with the required attribute Match INPUT element with no required attribute	: Required {Outline:medium solid red;}:o ptional {outline:medium solid green;}

Dynamic Pseudo class Selector
Selector

Selector	meaning	Demo Sample	Description
: Link : Visited	Select Link Element Select the link element for which the user has been interviewed	: Link {Border:thin black solid;background-color:lightgrey;padding:4px;color:red;}:visited {Background-color:grey; Color:white;}
: hover	The element on which the mouse hovers	Button:hover {Border:thin Black solid;padding:4px}	Match the button element on which the mouse hovers
: Active	The element currently activated by the user, which usually means that the user is about to click on the element	: active {Border:thin Black solid;padding:4px}
: Focus	The element that currently receives focus	Input:focus {Border:thin Black solid;padding:4px}	Select the input element that gets focus

Other pseudo-class selectors
Selector

Selector	meaning	Demo Sample	Description
: Not (< selector >)	To reverse the selection of selectors in parentheses	A:not ([href*= "Apress"]) {Border:thin black solid;padding:4px}	The match href attribute does not include the A element of the string apress
: Empty	Elements with No child elements
: lang (< target language >)	Select elements based on the lang global attribute value	: lang (en) {Border:thin black solid;padding:4px}	Match elements with Lang attribute and content in English
: Target	The element that the URL fragment identifier points to	: Target {Border:thin black solid;padding:4px;color:red;}

CSS3: Selector