Tutorial
A CSS Selector Reference
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
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;
}
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
best summary/guide to CSS selectors i’ve come across thanks