Introduction to CSS3 - Selectors - Learnning notes
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