Basic selectors

Universal selector

The CSS universal selector * matches elements of any type.

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

Type selector

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

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

Class selector

The CSS class selector matches elements based on the contents of their class attribute.

.class_name { style properties }

ID selector

The CSS ID selector matches an element based on the value of the element's id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector.

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

Attribute selector

The CSS attribute selector matches elements based on the presence or value of a given attribute.

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

Grouping selectors

Selector list

The CSS selector list (,) selects all the matching nodes.

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

Combinators

Descendant combinator

The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

selector1 selector2 {
  /* property declarations */
}

Child combinator

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

selector1 > selector2 { style properties }

General sibling combinator

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

former_element ~ target_element { style properties }

Adjacent sibling combinator

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

former_element + target_element { style properties }

Column combinator

The column combinator (||) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.

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

Pseudo-classes and pseudo-elements

Pseudo classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

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

Pseudo elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

selector::pseudo-element {
  property: value;
}

Ujjawal Maurya