Basic Selectors

Universal Selector

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax: * ns|* *|* Example:* will match all the elements of the document.

/* Selects all elements */
* {
  color: green;
}

Type selector

Selects all elements that have the given node name.

Syntax:elementname Example: input will match any <input> element.

/* All <a> elements. */
a {
  color: red;
}

Class selector

Selects all elements that have the given class attribute.

Syntax: .classname Example: .index will match any element that has a class of "index".

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

ID selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

Syntax: #idname Example: #toc will match the element that has the ID "toc".

/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

Attribute selector

Selects all elements that have the given attribute.

Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

Grouping selectors

Selector list

The , selector is a grouping method that selects all the matching nodes.

Syntax: A, B Example: div, span will match both <span> and <div> elements.

/* Selects all matching elements */
span,
div {
  border: red 2px solid;
}

Combinators

Descendant combinator

The " " (space) combinator selects nodes that are descendants of the first element.

Syntax: A B Example: div span will match all <span> elements that are inside a <div> element.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

Child combinator

The > combinator selects nodes that are direct children of the first element.

Syntax: A > B Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

General sibling combinator

The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

Syntax: A ~ B Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.

/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}

Adjacent sibling combinator

The + combinator matches the second element only if it immediately follows the first element.

Syntax: A + B Example: h2 + p will match the first <p> element that immediately follow an <h2> element.

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

Column combinator Experimental

The || combinator selects nodes which belong to a column.

Syntax: A || B Example: col || td will match all <td> elements that belong to the scope of the <col>.

/* Table cells that belong to the "selected" column */
col.selected || td {
  background: gray;
}

Pseudo

Pseudo classes

The : pseudo allow the selection of elements based on state information that is not contained in the document tree.

Example: a:visited will match all <a> elements that have been visited by the user.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Pseudo elements

The :: pseudo represent entities that are not included in HTML.

Example: p::first-line will match the first line of all <p> elements.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}