Tutorial

A CSS Selector Reference

Published on August 18, 2016

Alligator.io

A reference of CSS selectors. This includes new selectors from CSS Selectors Level 3 (CSS3):

Root Element Selector: :root

Selects the root element. All elements are descendants of the root element, and it almost always references the <html> element.

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.

Link Pseudo-Classes

Link: a:link

A link that hasn’t been visited. The starting point for links

User Action Pseudo-Classes

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.

Learn more about our products

About the authors

Alligator.io

author

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.