CSS Pseudo Class Selector

What is CSS Selector? CSS Selector is like rules, whether the element matches the selector or not.

Selector range is from simple element names to a specific unique state.

Almost all selectors are evaluate left to right order but some selectors are evaluate right to left.

CSS Pseudo Selector 2 types

CSS Pseudo Class Selector: CSS pseudo class selector identify by "colon" (:) with the name of pseudo class.
CSS Pseudo Element Selector: CSS Pseudo element selectors define abstract elements in a HTML. Pseudo element identify by "double colon" (::) with the name of pseudo element. Learn CSS Pseudo element.

You can define selector element with the name of pseudo class, syntax is like

selector:pseudo { property:value; }

You can also define selector element with "dot" (.) class name with the name of pseudo class, syntax is like

selector.class:pseudo { property:value; }

Universal Selector

Pseudo Class	Example	Description	CSS
*	* {font-size:24px}	Select all element, set all element font-size 24px	2

Pseudo Class	Example	Description	CSS
element	h4	Select all h4 tag element. CSS Tagname selector full qualified CSS names and represent an instance of same type element	1
element, element	p, h4, span	Select one or more group element all <p>, <h4>, <span> element	1

Pseudo Class	Example	Description	CSS
element.class	p.highlight	Select all <p> element with class="highlight"	1
element#id	p#heading	Select all <p> element with id="heading"	1

Pseudo Class	Example	Description	CSS
element element	div p	Select all <p> element descendant of <div> element	1
element > element	div > p	Select all <p> element whose are child of an <div> element	2
element + element	div + p	Select all <p> element, they are only next sibling of an <div> element	2
element ~ element	div ~ p	Select all <p> element, they are sibling of an <p> element	3

Pseudo Class	Example	Description	CSS
element:not(selector)	p:not(.one)	Select all <p> element exclude class name="one"	3/4
element:matches(selector)	p:matches(.one)	Select all <p> element with matches class name="one"	4

Pseudo Class	Example	Description	CSS
element[attr]	a[href]	Select all <a> element with a href attribute	2
element[attr=val]	p[href="#"]	Select all <a> element whose have href attribute value "#" Multiple attribute selector are also define.	2
element[attr~=val]	a[href="url"]	Select all <a> element whose href attribute contain the value "URL" word	2
element[attr\|=val]	a[hreflang\|=en]	Select all <a> element whose hreflang attribute value beginning with "en" word immediately followed by "-"	2

Pseudo Class	Example	Description	CSS
element[attr^=val]	a[class^=dem]	Select all <a> element whose class attribute value beginning with "dem" word	3
element[attr$=val]	a[class$="demo"]	Select all <a> element whose class attribute value end with "demo" word	3
element[attr*=val]	a[href*="demo"]	Select all <a> element whose href attribute value contain at least one substring value "demo" word	3

Pseudo Class	Example	Description	CSS
element:link	a:link	Select all <a> element whose link never ever visit.	1
element:active	a:active	Select all <a> element whose link currently active.	1
element:visited	a:visited	Select all <a> element whose link already visited.	1
element:target	p:target	Select <p> element whose hash (#) href URL and id are same	3

Pseudo Class	Example	Description	CSS
element:hover	a:hover	Select <a> element during user perform mousehover action	1
element:focus	input:focus	Select <input> element when user focus action perform on there	2

Pseudo Class	Example	Description	CSS
element:enabled	input:enabled	Select all <input> element whose are enabled state	3
element:disabled	input:disabled	Select all <input> element whose are disabled state	3
element:checked	input:checked	Select <input> element whose are checked state	3
element:indeterminate	input:indeterminate	Select radio and checkbox button indeterminate state, neither checked nor unchecked	3/4

Pseudo Class	Example	Description	CSS
element:root	:root	Select root element of the document	3
element:empty	div:empty	Select all <div> element whose haven't children element even not text node	3
element:first-child	li:first-child	Select first li element	3
element:nth-child(n)	li:nth-child(2)	Select 2nd number of li element	3
element:last-child	li:first-child	Select last li element	3
element:nth-last-child(n)	li:nth-last-child(2)	Select 2nd last number of li element	3
element:only-child	li:only-child	Select li element whose are only one li child element of an parent element	3
element:first-of-type	:first-of-type	Select all first of type element	3
element:nth-of-type(n)	:nth-of-type(2)	Select 2nd elemen of its type	3
element:last-of-type	:last-of-type	Select all last of type element	3
element:nth-last-of-type(n)	:nth-last-of-type(1)	Select 1st last element of its type	3
element:only-of-type	li:only-of-type	Select li type element whose are only one li type child element	3

Pseudo Class	Example	Description	CSS
element:lang()	a:lang(fr)	Select all <a> element whose lang attribute value "fr" (without double quote).	3