Research and Documentation
Page 02: CSS Tricks Almanac

About CSS Selectors and Properties

As their name implies, selectors are used for selecting specific HTML elements, which are then styled using properties and corresponding values. The general syntax for a CSS rule (which must contain at least one selector, at least one property, and at least one value) is the following:

selector {
	property: value;
}

There are five main types of selectors:

  • Type selectors
  • Class selectors
  • ID selectors
  • Relational selectors (including pseudo-class selectors)
  • Unviersal selector (*)

There are also five main selector combinators:

  • Descendant combinator (space)
  • Child combinator (>)
  • General sibling combinator (˜)
  • Adjacent sibling combinator (+)
  • Multi-selection (chained) combinator (,)

For more information about basic CSS selectors, read the CSS Selectors guide from CSS-Tricks.

Selectors: :has() and :is()

The :has() pseudo-class selector selects the indicated elements whose child elements match the ones within the given arguments. The :is() pseudo-class selector allows for the grouping of multiple other selectors into a single selector, essentially acting as a logical OR gate. Below are some examples of these two selectors.

pre:has(code) {
	font-family: 'Cascadia Code', 'Cascadia Mono', Courier, monospace;
}
:is(article, section, aside) > p {
	background-color: white;
}
:is(header, nav, main, footer) > :is(h1, h2, h3, h4, h5, h6) {
	padding: 0;
}

Almanac Pages

:has()

:is()

Selectors: ::first-letter and ::first-line

The ::first-letter pseudo-element selector selects the first textual character of the indicated element. (Note: the ::first-letter pseudo-element selector has no effect on inline-level elements or elements whose display property is set to inline.) The ::first-line pseudo-element selector selects the entire first line of textual content within the indicated element. Interestingly, declarations applied using the ::first-line pseudo-element selector can and will override any conflicting declarations applied directly to the corresponding HTML element; in other words, ::first-line can override all relevant levels of specificity — even !important. Below are some examples of ::first-letter and ::first-line.

p::first-letter {
	font-weight: bold;
	color: firebrick;
}
p::first-line {
	font-size: 25px;
}

Almanac Pages

::first-letter

::first-line

Selectors: ::before and ::after

The ::before and ::after pseudo-element selectors can insert additional content before the existing content of an HTML element and after the existing content of an HTML element, respectively. Any rules using either (or both) of these two selectors must contain a declaration assigning a value to the content property; the content property must be assigned a value of one of the following types:

  • <string> (can be any string of characters enclosed in either single quotation marks or double quotation marks; can also be the empty string)
  • <image>
  • counter()

Below are some examples of ::before and ::after.

section::before {
	content: "This is shown before the primary content.";
}
section::after {
	content: "This is shown after the primary content.";
}
*,
*::before,
*::after {
	content: "";
	box-sizing: border-box;
}

Almanac Page

::before / ::after

Selectors: :link, :visited, :hover, :focus, and :active

The :link, :visited, :hover, :focus, and :active pseudo-class selectors are used almost exclsively with <a> HTML elements. Each of these five pseudo-class selectors is triggered by a different condition:

  1. :link — Default state for unvisited <a> elements that have an href="" attribute.
  2. :visited — Default state for visited <a> elements that have an href="" attribute.
  3. :hover — Activated while the mouse cursor is hovering over the hyperlink.
  4. :focus — Activated while the hyperlink has the keyboard focus.
  5. :active — Activated while the mouse button is being held down on the hyperlink.

In order for these five pseudo-class selectors to work together, they must be coded in the order shown above; if they are not coded in this order, they will not work properly. Below is an example of these five pseudo-class selectors.

a:link {
	color: blue;
}

a:visited {
	color: purple;
}

a:hover {
	color: cornflowerblue;
}

a:focus {
	color: cornflowerblue;
}

a:active {
	color: navy;
}

Almanac Pages

:link

:visited

:hover

:focus

:active

Property: user-select

The user-select property determines the manner in which an element's contents may (or may not) be selected. The following are valid values for user-select:

  • auto (default value)
  • all
  • none
  • text

Below is an example of user-select.

img {
	user-select: none;
}

Almanac Page

user-select

Properties: speak and speak-as

The speak property determines whether an element's content is to be read aloud by screen-readers. The following are valid values for speak:

  • auto
  • never
  • always

The speak-as property determines how an element's content is to be read aloud by screen-readers. The following are valid values for speak-as:

  • normal
  • spell-out
  • digits
  • literal-punctuation
  • no-punctuation

Below is an example of speak and speak-as.

p {
	speak: always;
	speak-as: normal;
}

Almanac Page

speak / speak-as

Properties: pointer-events and touch-action

The pointer-events property determines the manner in which an HTML element responds to events triggered by the mouse and/or the touchscreen (if applicable). The following are valid values for pointer-events:

  • none (valid on any HTML element)
  • auto (valid on any HTML element)
  • inherit (valid on any HTML element)
  • visiblePainted (valid only on HTML elements used in the construction of SVGs)
  • visibleFill (valid only on HTML elements used in the construction of SVGs)
  • visibleStroke (valid only on HTML elements used in the construction of SVGs)
  • visible (valid only on HTML elements used in the construction of SVGs)
  • painted (valid only on HTML elements used in the construction of SVGs)
  • fill (valid only on HTML elements used in the construction of SVGs)
  • stroke (valid only on HTML elements used in the construction of SVGs)
  • bounding-box (valid only on HTML elements used in the construction of SVGs)
  • all (valid only on HTML elements used in the construction of SVGs)

The touch-action property determines the manner in which an HTML element responds to various touchscreen actions, hence the name. The following are valid values for touch-action:

  • auto
  • none
  • pan-x (shorthand for pan-left pan-right)
  • pan-y (shorthand for pan-up pan-down)
  • manipulation (shorthand for pan-x pan-y pinch-zoom)
  • pan-left
  • pan-right
  • pan-up
  • pan-down
  • pinch-zoom

Below are some examples of pointer-events and touch-action.

path,
line {
	pointer-events: all;
}
img {
	touch-action: pinch-zoom;
}

Almanac Pages

pointer-events

touch-action

Properties: top, bottom, left, and right

The top, bottom, left, and right properties determine the placement of an HTML element. (Note: in order for these four properties to have any effect, the corresponding HTML element must have its position property set to a value other than static.) The following are valid values for top, bottom, left, and right:

  • any <length> value
  • any <percentage> value
  • auto
  • inherit

Below is an example of top, bottom, left, and right.

figure > img {
	top: -50px;
	bottom: auto;
	left: -50px;
	right: auto;
}

Almanac Page

top / bottom / left / right

Summary

This page contains general information about basic CSS selectors. This page also contains specific information about the following CSS selectors and properties:

  • :has()
  • :is()
  • ::first-letter
  • ::first-line
  • ::before
  • ::after
  • :link
  • :visited
  • :hover
  • :focus
  • :active
  • user-select
  • speak
  • speak-as
  • pointer-events
  • touch-action
  • top
  • bottom
  • left
  • right