CSSPlayers

CSS Selectors: An easy dose

CSS selectors are used to select the HTML elements in a web page that we want to style. Selectors are the part of CSS syntax. There are different kinds of CSS selectors which allows us to select desired HTML elements and content.

CSS Selectors

Selector	Example	Description
.class	.cname	Selects all elements with class=”cname”
#id	.idname	Selects the element with id=”idname”
*	*	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
element ~ element	div ~ p	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 <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”
:active	a:active	Selects the active link
::after	p::after	Insert something after the content of each <p> element
::before	p::before	Insert something before the content of each <p> element
:checked	input:checked	Selects every checked <input> element
:default	input:default	Selects the default <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> 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
:indeterminate	input:indeterminate	Selects input elements that are in an indeterminate state
:invalid	input:invalid	Selects 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-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
: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-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no “required” attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
::placeholder	::placeholder	Selects input elements with placeholder text
: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