CSS Selector Syntax Reference manual

Transferred from: http://www.w3school.com.cn/cssref/css_selectors.asp

CSS3 Selector

In CSS, a selector is a pattern that selects the elements that need to be added to a style.

The CSS column indicates which version of the CSS the property is defined in. (CSS1, CSS2 or CSS3. ）

Selector

Selector	Example	Example Description	CSS
. class	. intro	Select all elements of class= "Intro".	1
#ID	#firstname	Select all elements of id= "FirstName".	1
*	*	Selects all elements.	2
Element	P	Select all <p> elements.	1
element,element	Div,p	Select all <div> elements and all <p> elements.	1
element element	Div p	Select all <p> elements inside the <div> element.	1
element>element	Div>p	Selects all <p> elements of the parent element for the <div> element.	2
element+element	Div+p	Select all <p> elements immediately after the <div> element.	2
[attribute]	[Target]	Selects all elements with the target property.	2
[attribute=value]	[Target=_blank]	Select all elements of target= "_blank".	2
[attribute~=value]	[Title~=flower]	Select all elements of the title property that contain the word "flower".	2
[attribute|=value]	[Lang|=en]	Select all elements with the Lang attribute value beginning with "en".	2
: Link	A:link	Select all links that have not been accessed.	1
: Visited	a:visited	Select all links that have been visited.	1
: Active	A:active	Select the active link.	1
: hover	A:hover	Select the link on which the mouse pointer is located.	1
: Focus	Input:focus	Select the input element that gets the focus.	2
: First-letter	P:first-letter	Select the first letter of each <p> element.	1
: First-line	P:first-line	Select the first line of each <p> element.	1
: First-child	P:first-child	Select each <p> element that belongs to the first child element of the parent element.	2
: Before	P:before	Insert content before the contents of each <p> element.	2
: After	P:after	Insert content after each <p> element's content.	2
: lang (language)	P:lang (IT)	Select each <p> element with a value for the lang attribute that starts with "it".	2
element1~element2	P~ul	Select each <ul> element that has a <p> element in front of it.	3
[attribute^=value]	a[src^= "https"]	Select each <a> element whose src attribute value begins with "https".	3
[attribute$=value]	A[src$= ". pdf"]	Select all <a> elements whose src attribute ends with ". pdf".	3
[attribute*=value]	a[src*= "ABC"]	Select each <a> element that contains the "ABC" substring in its src attribute.	3
: First-of-type	P:first-of-type	Select each <p> element that belongs to the first <p> element of its parent element.	3
: Last-of-type	P:last-of-type	Select each <p> element that belongs to the last <p> element of its parent element.	3
: Only-of-type	P:only-of-type	Select each <p> element that belongs to the <p> element that is unique to its parent element.	3
: Only-child	P:only-child	Selects each <p> element that belongs to the unique child element of its parent element.	3
: Nth-child (n)	P:nth-child (2)	Selects each <p> element that belongs to the second child element of its parent element.	3
: Nth-last-child (n)	P:nth-last-child (2)	Ditto, counting from the last child element.	3
: Nth-of-type (n)	P:nth-of-type (2)	Select each <p> element that belongs to the second <p> element of its parent element.	3
: Nth-last-of-type (n)	P:nth-last-of-type (2)	Ditto, but starts counting from the last child element.	3
: Last-child	P:last-child	Select each <p> element that belongs to the last child element of its parent element.	3
: Root	: Root	Select the root element of the document.	3
: Empty	P:empty	Select each <p> element that has no child elements (including text nodes).	3
: Target	#news: Target	Select the currently active #news element.	3
: Enabled	Input:enabled	Select each of the enabled <input> elements.	3
:d isabled	Input:disabled	Select each of the disabled <input> elements	3
: Checked	Input:checked	Select each <input> element that is selected.	3
: Not (selector)	: Not (P)	Select each element of the non-<p> element.	3
:: Selection	:: Selection	Select the part of the element that is selected by the user.	3

CSS selector Syntax reference manual