CSS Selectors

CSS selectors are patterns that select elements that need to be styled.

Selectors find elements based on their id, class, type, attribute, and more.

Example

#

This paragraph is styled with a class selector named para.

A styled paragraph

<style>
  .para {
    background-color: aliceblue;
    border: 1px solid lightblue;
    padding: 20px;
  }
</style>

<p class="para">A styled paragraph</p>

Selector Types

There are 6 CSS selector types.

  1. CSS class selectors
  2. CSS id selectors
  3. CSS element selectors
  4. CSS attribute selectors
  5. CSS pseudo-class selectors
  6. CSS global selectors


CSS Class Selectors

#

Class selectors select the class attribute of an element. The selector is prefixed with a . (dot). One or more elements can be selected.

Some example class selectors:

Selector Example Selects
.class .classname All elements with class="classname"
.class1.class2 <div class="cn1 cn2">
  ...
</div>
All elements with both cn1 and cn2 classnames.
.class1 .class2 <div class="cn1">
  <div class="cn2">
    ...
  </div>
</div>
All elements with cn2 that are contained by an element with cn1.

CSS Id Selectors

#

Id selectors select the id attribute of an element. The selector is prefixed with a # (hash). Only one element can be selected because id values are unique on a page.

An id selector:

Selector Example Selects
#id #email The element with id="email"

Element Selectors

#

Element selectors select elements by tag name, i.e. type, such as div or ul. The style applies to all elements of that type.

Some element selectors:

Selector Example Selects
element ul All <ul> elements
element1, element2 div, ul All <div> and <ul> elements.
element1 element2 div ul All <ul> elements inside <div> elements.
element1 > element2 div > ul All child <ul> elements of <div> elements.
element1 + element2 div + ul All <ul> elements immediately preceded by a <div> element.
element1 ~ element2 div ~ ul All <ul> elements preceded by a <div> element.

Attribute Selectors

#

Attribute selectors select elements by attribute. The selectors are surrounded by square brackets, for example [hidden]. The style applies to all elements with that attribute.

Some attribute selectors:

Selector Example Selects
[attribute] [for] All elements with a for attribute
[attribute=value] [for="email"] All elements with a for="email" attribute
[attribute^=value] button[value^="Go"] All <button> elements whose value attribute starts with "Go"
[attribute$=value] img[src$=".png"] All <img> elements whose src attribute ends with ".jpg"
[attribute*=value] img[alt*="Van Gogh"] All <a> elements whose alt attribute contains the substring "Van Gogh"
[attribute~=value] [title~=create] All elements whose title attribute contains the word "create", delimited by spaces.
[attribute|=value] [lang|=nl] All elements whose lang attribute is a hyphen-separated list starting with "nl" or "nl-"

Pseudo-class Selectors

#

Pseudo-class selectors select elements by psuedo-class. It is commonly combined with element selectors, such as input:enabled.

Some pseudo class selectors:

Selector Example Selects
:active a:active All active links
:visited a:visited All visited links
:link a:link All unvisited links
::after ul::after Add cosmetic content after each <ul> element
::before ul::before Add cosmetic content before each <ul> element
:checked input:checked All <input> elements that are checked
:default input:default All <input> elements that are specified as default
:enabled input:enabled All <input> elements that are enabled
:disabled input:disabled All <input> elements that are disabled
:valid input:valid All <input> input elements with a valid value
:invalid input:invalid All <input> elements with an invalid value
:in-range input:in-range All <input> elements with a value that is within a specified range
:out-of-range input:out-of-range All <input> elements with a value outside the specified range
:indeterminate input:indeterminate All <input> elements that are in an indeterminate state
:required input:required All <input> elements with a "required" attribute
:optional input:optional All <input> elements with no "required" attribute
:read-only input:read-only All <input> elements with a "readonly" attribute
:read-write input:read-write All <input> elements WITHOUT a "readonly" attribute
::placeholder input::placeholder All <input> elements with placeholder text
:hover input:hover The <input> element that currently being hovered
:focus input:focus The <input> element that currently has focus
:empty ol:empty All <ol> element without child elements
:first-child li:first-child All <li> elements that are the first child of their parent
:last-child li:last-child All <li> elements that are the last child of their parent
:nth-child(n) li:nth-child(2) All <li> elements that are second child of their parent
:nth-last-child(n) li:nth-last-child(2) All <li> elements that are second to last child of their parent
:only-child li:only-child All <li> elements that are the only child of its parent
:first-of-type label:first-of-type All <label> elements that are the first label of their parent
:last-of-type label:last-of-type All <label> elements that are the last label of their parent
:nth-of-type(n) label:nth-of-type(2) All <label> elements that are the second label of their parent
:nth-last-of-type(n) label:nth-last-of-type(2) All <label> elements that are the second to last label of their parent
:only-of-type label:only-of-type All <label> elements that are the only label element of their parent
::first-letter p::first-letter The first letter of every <p> element
::first-line p::first-line The first line of every <p> element
:lang(language) p:lang(fr) All French <p> elements
:not(selector) :not(table) All elements that are not a <table> element
:root :root The document's root element
::selection ::selection Parts of an element that is selected (highlighted) by the user -- usually text
:target :target The element that matches the url fragment, e.g. element with id="list" when the url is www.mysite.com#list.

Global Selectors

#

The global selector uses an * (asterisk). It selects all elements.

Selector Example Selects
* * All elements

You may also like

Guides