Common Selectors

Type Selector

Selects an element by its type.

h1

Class Selector

Selects an element by the class attribute value, which may be reused multiple times per page.

.blue-button

ID Selector

Selects an element by the ID attribute value, which is unique and to only be used once per page.

#submit

Child Selectors

Descendant Selector

Selects an element that resides anywhere within an identified ancestor element.

div h2

Direct Child Selector

Selects an element that resides immediately inside an identified parent element.

div > p

Sibling Selectors

General Sibling Selector

Selects an element that follows anywhere after the prior element, in which both elements share the same parent

h3 ~ p

Adjacent Sibling Selector

Selects an element that follows directly after the prior element, in which both elements share the same parent.

h3 + p

Attribute Selectors

Attribute Present Selector

Selects an element if the given attribute is present

a[target]

Attribute Equals Selector

Selects an element if the given attribute value exactly matches the value stated

a[href="http://google.com/"]

Attribute Contains Selector

Selects an element if the given attribute value contains at least once instance of the value stated

a[href*="login"]

Attribute Begins With Selector

Selects an element if the given attribute value begins with the value stated

a[href^="https://"]

Attribute Ends With Selector

Selects an element if the given attribute value ends with the value stated

a[href$=".pdf"]

Attribute Spaced Selector

Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated

a[rel~="tag"]

Attribute Hyphenated Selector

Selects an element if the given attribute value is hyphen-separated and begins with the word stated

a[lang|="en"]

Pseudo-classes

Link Pseudo-classes

Selects a link that has not been visited by a user

a:link

Selects a link that has been visited by a user

a:visited

User Action Pseudo-classes

Selects an element when a user has hovered their cursor over it

a:hover

Selects an element when a user has engaged it

a:active

Selects an element when a user has made it their focus point

a:focus

User Interface State Pseudo-classes

Selects an element in the default enabled state

input:enabled

Selects an element in the disabled state, by way of the disabled attribute

input:disabled

Selects a checkbox or radio button that has been checked

input:checked

Selects a checkbox or radio button that neither been checked or unchecked, leaving it in an indeterminate state

input:indeterminate

Structural & Position Pseudo-classes

Selects an element that is the first within a parent

li:first-child

Selects an element that is the last within a parent

li:last-child

Selects an element that is the only element within a parent

div:only-child

Selects an element that is the first of its type within a parent

p:first-of-type

Selects an element that is the last of its type within a parent

p:last-of-type

Selects an element that is the only of its type within a parent

img:only-of-type

Selects an element that matches the given number or expression, counting all elements from the beginning of the document tree

li:nth-child(2n+3)

Selects an element that matches the given number or expression, counting all elements from the end of the document tree

li:nth-last-child(3n+2)

Selects an element that matches the given number or expression, counting only elements of its type from the beginning of the document tree

p:nth-of-type(3n)

Selects an element that matches the given number or expression, counting only elements of its type from the end of the document tree

p:nth-last-of-type(2n+1)

Target Pseudo-class

Selects an element whose ID attribute value matches that of the URI fragment identifier

section:target

Empty Pseudo-class

Selects an element that does not contain any children or text nodes

div:empty

Negation Pseudo-class

Selects an element not represented by the stated argument

div:not(.awesome)

Pseudo-elements

Textual Pseudo-elements

Selects the first letter of text within an element

.alpha:first-letter

Selects the first line of text within an element

.bravo:first-line

Generated Content Pseudo-elements

Creates a pseudo-element inside the selected element at the beginning

div:before

Creates a pseudo-element inside the selected element at the end

a:after

Fragment Pseudo-element

Selects the part of a document which has been selected, or highlighted, by a users’ actions

::selection

Yang's Blog