Complex CSS Selectors

Writting by:Vagelis Hatzilamprou © | Adelaide, South Australia 2015

Common Selectors

Example	Explanation	Classification
h1	Selects an element by it’s type	Type Selector
.tagline	Selects an element by the class attribute value, which may be reused multiple times per page	Class Selector
#intro	Selects an element by the ID attribute value, which is unique and to only be used once per page	ID Selector

Child Selectors

Example	Explanation	Classification
article h2	Selects an element that resides anywhere within an identified ancestor element	Descendant Selector
article > p	Selects an element that resides immediately inside an identified parent element	Direct Child Selector

Sibling Selectors

Example	Explanation	Classification
h2 ~ p	Selects an element that follows anywhere after the prior element, in which both elements share the same parent	General Sibling Selector
h2 + p	Selects an element that follows directly after the prior element, in which both elements share the same parent	Adjacent Sibling Selector

Attribute Selectors

Example	Explanation	Classification
a[target]	Selects an element if the given attribute is present	Attribute Present Selector
a[href="http://www.com/"]	Selects an element if the given attribute value exactly matches the value stated	Attribute Equals Selector
a[href*="login"]	Selects an element if the given attribute value contains at least once instance of the value stated	Attribute Contains Selector
a[href^="https://"]	Selects an element if the given attribute value begins with the value stated	Attribute Begins With Selector
a[href$=".pdf"]	Selects an element if the given attribute value ends with the value stated	Attribute Ends With Selector
a[rel~="tag"]	Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated	Attribute Spaced Selector
a[lang|="en"]	Selects an element if the given attribute value is hyphen-separated and begins with the word stated	Attribute Hyphenated Selector

Pseudo-classes

Example	Explanation	Classification
a:link	Selects a link that has not been visited by a user	Link Pseudo-class
a:visited	Selects a link that has been visited by a user	Link Pseudo-class
a:hover	Selects an element when a user has hovered their cursor over it	Action Pseudo-class
a:active	Selects an element when a user has engaged it	Action Pseudo-class
a:focus	Selects an element when a user has made it their focus point	Action Pseudo-class
input:enabled	Selects an element in the default enabled state	State Pseudo-class
input:disabled	Selects an element in the disabled state, by way of the disabled attribute	State Pseudo-class
input:checked	Selects a checkbox or radio button that has been checked	State Pseudo-class
input:indeterminate	Selects a checkbox or radio button that neither been checked or unchecked, leaving it in an indeterminate state	State Pseudo-class
li:first-child	Selects an element that is the first within a parent	Structural Pseudo-class
li:last-child	Selects an element that is the last within a parent	Structural Pseudo-class
div:only-child	Selects an element that is the only element within a parent	Structural Pseudo-class
p:first-of-type	Selects an element that is the first of it’s type within a parent	Structural Pseudo-class
p:last-of-type	Selects an element that is the last of it’s type within a parent	Structural Pseudo-class
img:only-of-type	Selects an element that is the only of it’s type within a parent	Structural Pseudo-class
li:nth-child(2n+3)	Selects an element that matches the given number or expression, counting all elements from the beginning of the document tree	Structural Pseudo-class
li:nth-last-child(3n+2)	Selects an element that matches the given number or expression, counting all elements from the end of the document tree	Structural Pseudo-class
p:nth-of-type(3n)	Selects an element that matches the given number or expression, counting only elements of it’s type from the beginning of the document tree	Structural Pseudo-class
p:nth-last-of-type(2n+1)	Selects an element that matches the given number or expression, counting only elements of it’s type from the end of the document tree	Structural Pseudo-class
section:target	Selects an element whose ID attribute value matches that of the URI fragment identifier	Target Pseudo-class
div:empty	Selects an element that does not contain any children or text nodes	Empty Pseudo-class
div:not(.awesome)	Selects an element not represented by the stated argument	Negation Pseudo-class

version4.com.au