CSS and jQuery Selectors • Russwurm

CSS and jQuery Selectors

Created: 23.09.2016 | Updated: 03.01.2017

Always struggling with more complex CSS selectors so I need this overview to have a fast reference.

CSS Selectors

SelectorExampleExample description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all p elements
element,element div, p Selects all div elements and all p elements
element element div p Selects all p elements inside div elements
element>element div > p Selects all p elements where the parent is a div element
element+element div + p Selects all p elements that are placed immediately after div elements
element1~element2 p ~ ul Selects every ul element that are 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 starting with "en"
[attribute^=value] a[href^="https"] Selects every element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each

element

::before p::before Insert something before the content of each

element

:checked input:checked Selects every checked element
:disabled input:disabled Selects every disabled element
:empty p:empty Selects every

element that has no children (including text nodes)

:enabled input:enabled Selects every enabled element
:first-child p:first-child Selects every

element that is the first child of its parent

::first-letter p::first-letter Selects the first letter of every

element

::first-line p::first-line Selects the first line of every

element

:first-of-type p:first-of-type Selects every

element that is the first

element of its parent

:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every

element with a lang attribute equal to "it" (Italian)

:last-child p:last-child Selects every

element that is the last child of its parent

:last-of-type p:last-of-type Selects every

element that is the last

element of its parent

:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a

element

:nth-child(n) p:nth-child(2) Selects every

element that is the second child of its parent

:nth-last-child(n) p:nth-last-child(2) Selects every

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

element that is the second

element of its parent, counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every

element that is the second

element of its parent

:only-of-type p:only-of-type Selects every

element that is the only

element of its parent

:only-child p:only-child Selects every

element that is the only child of its parent

:optional input:optional Selects input elements with no "required" attribute 3
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links

jQuery Selectors

elements elements
SelectorExampleSelects
*$("*")All elements
#id$("#lastname")The element with id="lastname"
.class$(".intro")All elements with class="intro"
.class,.class$(".intro,.demo")All elements with the class "intro" or "demo"
element$("p")All

elements

el1,el2,el3$("h1,div,p")All

,
and

elements

:first$("p:first")The first

element

:last$("p:last")The last

element

:even$("tr:even")All even
:odd$("tr:odd")All odd
:first-child$("p:first-child")All

elements that are the first child of their parent

:first-of-type$("p:first-of-type")All

elements that are the first

element of their parent

:last-child$("p:last-child")All

elements that are the last child of their parent

:last-of-type$("p:last-of-type")All

elements that are the last

element of their parent

:nth-child(n)$("p:nth-child(2)")All

elements that are the 2nd child of their parent

:nth-last-child(n)$("p:nth-last-child(2)")All

elements that are the 2nd child of their parent, counting from the last child

:nth-of-type(n)$("p:nth-of-type(2)")All

elements that are the 2nd

element of their parent

:nth-last-of-type(n)$("p:nth-last-of-type(2)")All

elements that are the 2nd

element of their parent, counting from the last child

:only-child$("p:only-child"){ "@context": "http://schema.org","@type": "Article","mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.russwurm.com/en/blog/post/css-and-jquery-selectors"}, "headline": "CSS and jQuery Selectors • Russwurm", "image": ["https://www.russwurm.com/media/10/1200x630" ], "datePublished": "2016-09-23 00:00:00", "dateModified": "2017-01-03 22:40:09}", "author": { "@type": "Person", "name": "John Doe" }, "publisher": { "@type": "Organization", "name": "Russwurm", "logo": { "@type": "ImageObject", "url": "https://www.russwurm.com/img/logoimage.jpg" } }, "description": "Complete overview of CSS and jQuery selectors" }


  © 20xx        

You can view this page as reduced HTML version as well.