// Tutorial //

A CSS Selector Reference

Published on August 18, 2016
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
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.

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;
}

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?

best summary/guide to CSS selectors i’ve come across thanks