Table of Contents
A reference of CSS selectors. This includes new selectors from CSS Selectors Level 3 (CSS3):
Universal Selector: <^>*<^>
Selects everything.
Root Element Selector: <^>:root<^>
Selects the root element. All elements are descendants of the root element, and it almost always references the <^><html><^> element.
Type Selector: <^>h2<^>
Selects all elements of the type.
ID selector: <^>#myEl<^>
Selects the element with the provided ID.
Class selector: <^>.btn-xl<^>
Selects all elements with the provided class.
Attribute selectors
Simple Attribute Selector: <^>[target]<^>
Selects elements that have the provided attribute.
Attribute & Value Selector: <^>[target="_blank"]<^>
Selects elements that have the provided attribute and value.
Attribute & One of Many Values: <^>[class~="large"]<^>
Selects elements if the value is part of a white-space separated list of values.
Attribute & Beginning of a Value: <^>[target^="_b"]<^>
Selects elements who's value for an attribute starts with the provided string.
Attribute & End of a Value: <^>[target$="nk"]<^>
Selects elements who's value for an attribute ends with the provided string.
Attribute & Part of a Value: <^>[target*="lan"]<^>
Selects elements who's value for an attribute contains the substring provided.
Attribute & Part of a Hyphen-Separated List of Values: <^>[lang|="zu"]<^>
Selects elements if the value is the left part in a hyphen-separated list.
Descendant Selector: <^>h2 span<^>
Selects the element(s) provided on the right if it's a descendant of the element on the left.
Child Selector: <^>div > p<^>
Selects the element(s) provided on the right if it's a direct child of the element on the left.
Adjacent Sibling Selector: <^>div + p<^>
Selects the element provided on the right if it's immediately preceded by the element on the left.
General Sibling Selector: <^>div ~ p<^>
Selects the element provided on the right if it's preceded by the element on the left.
Negation Selector: <^>:not(.first-par)<^>
Selects elements that don't match the simple selector provided in parenthesis.
Pseudo-Elements
::before Pseudo-Element: <^>p::before<^>
Generated content before the element.
::after Pseudo-Element: <^>p::after<^>
Generated content after the element.
::first-letter Pseudo-Element: <^>p::first-letter<^>
The first letter of the element.
::first-line Pseudo-Element: <^>p::first-line<^>
The first line of the element.
Structural Pseudo-Classes
nth-child(n): <^>span:nth-child(5)<^>
Selects the n-th sibling if it's the provided type.
nth-last-child(n): <^>p:nth-last-child(4)<^>
Counting from the last child, selects the n-th sibling if it's the provided type.
nth-of-type(n): <^>span:nth-of-type(2)<^>
Selects the n-th sibling, only counting the same type.
nth-last-of-type(n): <^>span:nth-last-of-type(3)<^>
Counting from the last child and only counting the provided type, selects the n-th sibling.
first-child: <^>span:first-child<^>
Selects the first of child of the parent if it matches the provided type of element.
last-child: <^>span:last-child<^>
Selects the last of child of the parent if it matches the provided type of element.
first-of-type: <^>span:first-of-type<^>
Selects the first of the provided type within a parent.
last-of-type: <^>span:last-of-type<^>
Selects the last of the provided type within a parent.
only-child: <^>span:only-child<^>
Selects the element if it's the only child of the parent element.
only-of-type: <^>span:only-of-type<^>
Selects the element if it's the only one of its type inside the parent element.
empty: <^>div:empty<^>
Selects elements with no children.
Link Pseudo-Classes
Link: <^>a:link<^>
A link that hasn't been visited. The starting point for links
Visited: <^>a:visited<^>
A link that has been visited.
User Action Pseudo-Classes
Active: <^>a:active<^>
When the element is active.
Hover: <^>a:hover<^>
When the user's pointing device is on top of the element.
Focus: <^>a:focus<^>
When the element has the focus. For example, when the user clicks inside an input field, the field has the focus.
Target Pseudo-Class: <^>p:target<^>
Selected when the element on the left is the current target as defined by the url.
lang Pseudo-Class: <^>:lang(en)<^>
Element(s) with the specified lang attribute.
UI States Pseudo-Classes
Enabled: <^>input:enabled<^>
When the element(s) on the left is enabled.
Disabled: <^>input:disabled<^>
When the element(s) on the left is disabled.
Checked: <^>input:checked<^>
When the element(s) on the left is checked. Associated with the inputs of type radio or checkbox.
—
Remember that to target multiple selectors in one CSS declaration you use a comma between each selector. The following example selects all <^><p><^> elements that don't have the article-par class and also selects all <^><h2><^> elements:
p:not(.article-par), h2 {
font-weight: bold;
}
Also, if you want to select an element while targeting a combination of multiple classes and/or ID, you'll simple note the multiple classes and/or ID without using a space between them. For example, if you want to select and element that has the <^>btn<^> and <^>btn-large<^> classes:
.btn.btn-large {
font-weight: bold;
}
In the above example, you don't want your selector to be <^>.btn .btn-large<^>, because then it would select <^>.btn-large<^> elements that are descendants of <^>.btn<^> elements.
Now say that the element you want to select also has an ID of <^>#main-btn<^>:
#main-btn.btn.btn-large {
font-weight: bold;
}
