CSS Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page. The selector contains one or more properties that define how the selected HTML will be styled. A Selector is the portion of a Rule-Set that comes before the style declaration block embedded within curly braces ('{' and '}'.)

Selector Example Example Description CSS
* * Styles all elements 2
.class .intro Styles all elements with class="intro" 1
#id #list Styles the element with id="list" 1
element ul Styles all <ul> elements 1
element,element div, p Styles all <div> elements and all <p> elements 1
element element div p Styles all <p> elements inside <div> elements 1
element>element div > p Styles all <p> elements where the parent is a <div> element 2
element+element div + p Styles all <p> elements that are placed immediately after <div> elements 2
element1~element2 p ~ ul Styles every <ul> element that are preceded by a <p> element 3
[attribute] [target] Styles all elements with a target attribute 2
[attribute=value] [target=_blank] Styles all elements with target="_blank" 2
[attribute~=value] [title~=America] Styles all elements with a title attribute containing the word "America" 2
[attribute|=value] [lang|=en] Styles all elements with a lang attribute value starting with "en" 2
[attribute^=value] a[title^="A"] Styles every <a> element whose title attribute value begins with "A" 3
[attribute$=value] a[title$="ca"] Styles every <a> element whose title attribute value ends with "ca" 3
[attribute*=value] a[title*="America"] Styles every <a> element whose title attribute value contains the substring "America" 3
:active a:active Styles the active link 1
::after p::after Insert content after every <p> element 2
::before p::before Insert content before the content of every <p> element 2
:checked input:checked Styles every checked <input> element 3
:disabled input:disabled Styles every disabled <input> element 3
:empty p:empty Styles every <p> element that has no children (including text nodes) 3
:enabled input:enabled Styles every enabled <input> element 3
:first-child p:first-child Styles every <p> element that is the first child of its parent 2
::first-letter p::first-letter Styles the first letter of every <p> element 1
::first-line p::first-line Styles the first line of every <p> element 1
:first-of-type p:first-of-type Styles every <p> element that is the first <p> element of its parent 3
:focus input:focus Styles the input element which has focus 2
:hover a:hover Styles links on mouse over 1
:in-range input:in-range Styles input elements with a value within a specified range 3
:invalid input:invalid Styles all input elements with an invalid value 3
:lang(language) p:lang(es) Styles every <p> element with a lang attribute equal to "es" (Italian) 2
:last-child p:last-child Styles every <p> element that is the last child of its parent 3
:last-of-type p:last-of-type Styles every <p> element that is the last <p> element of its parent 3
:link a:link Styles all unvisited links 1
:not(selector) :not(p) Styles every element that is not a <p> element 3
:nth-child(n) p:nth-child(2) Styles every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Styles every <p> element that is the second child of its parent, counting from the last child 3
:nth-last-of-type(n) p:nth-last-of-type(2) Styles every <p> element that is the second <p> element of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Styles every <p> element that is the second <p> element of its parent 3
:only-of-type p:only-of-type Styles every <p> element that is the only <p> element of its parent 3
:only-child p:only-child Styles every <p> element that is the only child of its parent 3
:optional input:optional Styles input elements with no "required" attribute 3
:out-of-range input:out-of-range Styles input elements with a value outside a specified range 3
:read-only input:read-only Styles input elements with the "readonly" attribute specified 3
:read-write input:read-write Styles input elements with the "readonly" attribute NOT specified 3
:required input:required Styles input elements with the "required" attribute specified 3
:root :root Styles the document's root element 3
:target #news:target Styles the current active #news element (clicked on a URL containing that anchor name) 3
:valid input:valid Styles all input elements with a valid value 3
:visited a:visited Styles all visited links 1