CSS Selectors

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

The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

SelectorExampleExample descriptionCSS.class.introSelects all elements with class="intro"1#id#firstnameSelects the element with id="firstname"1**Selects all elements2elementpSelects all <p> elements1element,elementdiv, pSelects all <div> elements and all <p> elements1element elementdiv pSelects all <p> elements inside <div> elements1element>elementdiv > pSelects all <p> elements where the parent is a <div> element2element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements2element1~element2p ~ ulSelects every <ul> element that are preceded by a <p> element3[attribute][target]Selects all elements with a target attribute2[attribute=value][target=_blank]Selects all elements with target="_blank"2[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word "flower"2[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"2[attribute^=value]a[href^="https"]Selects every <a> element whose href attribute value begins with "https"3[attribute$=value]a[href$=".pdf"]Selects every <a> element whose href attribute value ends with ".pdf"3[attribute*=value]a[href*="w3schools"]Selects every <a> element whose href attribute value contains the substring "w3schools"3:activea:activeSelects the active link1::afterp::afterInsert content after every <p> element2::beforep::beforeInsert content before the content of every <p> element2:checkedinput:checkedSelects every checked <input> element3:disabledinput:disabledSelects every disabled <input> element3:emptyp:emptySelects every <p> element that has no children (including text nodes)3:enabledinput:enabledSelects every enabled <input> element3:first-childp:first-childSelects every <p> element that is the first child of its parent2::first-letterp::first-letterSelects the first letter of every <p> element1::first-linep::first-lineSelects the first line of every <p> element1:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent3:focusinput:focusSelects the input element which has focus2:hovera:hoverSelects links on mouse over1:in-rangeinput:in-rangeSelects input elements with a value within a specified range3:invalidinput:invalidSelects all input elemets with an invalid value3:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to "it" (Italian)2:last-childp:last-childSelects every <p> element that is the last child of its parent3:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent3:linka:linkSelects all unvisited links1:not(selector):not(p)Selects every element that is not a <p> element3:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent3: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 child3: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 child3:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent3:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent3:only-childp:only-childSelects every <p> element that is the only child of its parent3:optionalinput:optionalSelects input elements with no "required" attribute3:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range3:read-onlyinput:read-onlySelects input elements with the "readonly" attribute specified3:read-writeinput:read-writeSelects input elements with the "readonly" attribute NOT specified3:requiredinput:requiredSelects input elements with the "required" attribute specified3:root:rootSelects the document's root element3::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)3:validinput:validSelects all input elements with a valid value3:visiteda:visitedSelects all visited links1