HOME

CSS Selectors

in CSS, selectors are used to find and identify page elements in your HTML that you want to style.

you can target them based on type, attributes, state, and their relationship to other elements.

click on a selector name below for details and an HTML/CSS example.

Simple Selectors

use these to target different page elements

Universal (*)

Selects all elements on the page.

See the Pen Universal Selector by Kristine Roshau (@Kristine-Roshau) on CodePen.

Element (<element>)

Selects all elements of a type.

Here you can see all the <p> elements being changed.

See the Pen Element Selector by Kristine Roshau (@Kristine-Roshau) on CodePen.

Class (.)

Selects all elements with a specified class.

Here you can see just the p element with the .example class being changed.

See the Pen Class Selector by Kristine Roshau (@Kristine-Roshau) on CodePen.

ID (#)

Selects all elements with a given ID. Ids be used in combination with the element selector for increased specificity.

In this example, the #id on the second paragraph overrides the div .class styling for the text color.

See the Pen ID Selector by Kristine Roshau (@Kristine-Roshau) on CodePen.

Pseudo-Class Selectors

use these to modify behaviors of page elements relative to their state

:hover

selects an element when hovered over with a mouse. most commonly associated with link and button behaviors, but can also do nifty things like reveal hidden elements on the page.

See the Pen :hover selector by Kristine Roshau (@Kristine-Roshau) on CodePen.

:not

Pseudo-Element Selectors

use these to target and tweak the appearance of specific page elements

::before

::back-drop