CSS Reference


CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.

SelectorExampleExample description
.class.introSelects all elements with class=”intro”
.class1.class2.name1.name2Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2.name1 .name2Selects all elements with name2 that is a descendant of an element with name1
#id#firstnameSelects the element with id=”firstname”
**Selects all elements
elementpSelects all <p> elements
element.classp.introSelects all <p> elements with class=”intro”
element,elementdiv, pSelects all <div> elements and all <p> elements
element elementdiv pSelects all <p> elements inside <div> elements
element>elementdiv > pSelects all <p> elements where the parent is a <div> element
element+elementdiv + pSelects the first <p> element that is placed immediately after <div> elements
element1~element2p ~ ulSelects every <ul> element that is preceded by a <p> element
[attribute][target]Selects all elements with a target attribute
[attribute=value][target=_blank]Selects all elements with target=”_blank”
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word “flower”
[attribute|=value][lang|=en]Selects all elements with a lang attribute value equal to “en” or starting with “en-“
[attribute^=value]a[href^=”https”]Selects every <a> element whose href attribute value begins with “https”
[attribute$=value]a[href$=”.pdf”]Selects every <a> element whose href attribute value ends with “.pdf”
[attribute*=value]a[href*=”w3schools”]Selects every <a> element whose href attribute value contains the substring “w3schools”
:activea:activeSelects the active link
::afterp::afterInsert something after the content of each <p> element
::beforep::beforeInsert something before the content of each <p> element
:checkedinput:checkedSelects every checked <input> element
:defaultinput:defaultSelects the default <input> element
:disabledinput:disabledSelects every disabled <input> element
:emptyp:emptySelects every <p> element that has no children (including text nodes)
:enabledinput:enabledSelects every enabled <input> element
:first-childp:first-childSelects every <p> element that is the first child of its parent
::first-letterp::first-letterSelects the first letter of every <p> element
::first-linep::first-lineSelects the first line of every <p> element
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
:focusinput:focusSelects the input element which has focus
:fullscreen:fullscreenSelects the element that is in full-screen mode
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects input elements with a value within a specified range
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate state
:invalidinput:invalidSelects all input elements with an invalid value
:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to “it” (Italian)
:last-childp:last-childSelects every <p> element that is the last child of its parent
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
:linka:linkSelects all unvisited links
::marker::markerSelects the markers of list items
:not(selector):not(p)Selects every element that is not a <p> element
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
:only-childp:only-childSelects every <p> element that is the only child of its parent
:optionalinput:optionalSelects input elements with no “required” attribute
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range
::placeholderinput::placeholderSelects input elements with the “placeholder” attribute specified
:read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified
:read-writeinput:read-writeSelects input elements with the “readonly” attribute NOT specified
:requiredinput:requiredSelects input elements with the “required” attribute specified
:root:rootSelects the document’s root element
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all input elements with a valid value
:visiteda:visitedSelects all visited links

CSS Functions

CSS functions are used as a value for various CSS properties.

FunctionDescription
attr()Returns the value of an attribute of the selected element
calc()Allows you to perform calculations to determine CSS property values
conic-gradient()Creates a conic gradient
counter()Returns the current value of the named counter
cubic-bezier()Defines a Cubic Bezier curve
hsl()Defines colors using the Hue-Saturation-Lightness model (HSL)
hsla()Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)
linear-gradient()Creates a linear gradient
max()Uses the largest value, from a comma-separated list of values, as the property value
min()Uses the smallest value, from a comma-separated list of values, as the property value
radial-gradient()Creates a radial gradient
repeating-conic-gradient()Repeats a conic gradient
repeating-linear-gradient()Repeats a linear gradient
repeating-radial-gradient()Repeats a radial gradient
rgb()Defines colors using the Red-Green-Blue model (RGB)
rgba()Defines colors using the Red-Green-Blue-Alpha model (RGBA)
var()Inserts the value of a custom property