HI WELCOME TO Sirees

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.

Syntax

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 ClassExampleDescriptionCSS
** {font-size:24px}Select all element, set all element font-size 24px2

Tag Name Selector

Pseudo ClassExampleDescriptionCSS
elementh4Select all h4 tag element. CSS Tagname selector full qualified CSS names and represent an instance of same type element1
element, elementp, h4, spanSelect one or more group element
all <p>, <h4>, <span> element
1

Class/ID selector

Pseudo ClassExampleDescriptionCSS
element.classp.highlightSelect all <p> element with class="highlight"1
element#idp#headingSelect all <p> element with id="heading"1

Combinators selectors

Pseudo ClassExampleDescriptionCSS
element elementdiv pSelect all <p> element descendant of <div> element1
element > elementdiv > pSelect all <p> element whose are child of an <div> element2
element + elementdiv + pSelect all <p> element, they are only next sibling of an <div> element2
element ~ elementdiv ~ pSelect all <p> element, they are sibling of an <p> element3

Logical selectors

Pseudo ClassExampleDescriptionCSS
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

Attribute selectors

Pseudo ClassExampleDescriptionCSS
element[attr]a[href]Select all <a> element with a href attribute2
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" word2
element[attr|=val]a[hreflang|=en]Select all <a> element whose hreflang attribute value beginning with "en" word immediately followed by "-"2

Substring Attribute selectors

Pseudo ClassExampleDescriptionCSS
element[attr^=val]a[class^=dem]Select all <a> element whose class attribute value beginning with "dem" word3
element[attr$=val]a[class$="demo"]Select all <a> element whose class attribute value end with "demo" word3
element[attr*=val]a[href*="demo"]Select all <a> element whose href attribute value contain at least one substring value "demo" word3

Hyper link selectors

Pseudo ClassExampleDescriptionCSS
element:linka:linkSelect all <a> element whose link never ever visit.1
element:activea:activeSelect all <a> element whose link currently active.1
element:visiteda:visitedSelect all <a> element whose link already visited.1
element:targetp:targetSelect <p> element whose hash (#) href URL and id are same3

User Action selectors

Pseudo ClassExampleDescriptionCSS
element:hovera:hoverSelect <a> element during user perform mousehover action1
element:focusinput:focusSelect <input> element when user focus action perform on there2

User Interface State selectors

Pseudo ClassExampleDescriptionCSS
element:enabledinput:enabledSelect all <input> element whose are enabled state3
element:disabledinput:disabledSelect all <input> element whose are disabled state3
element:checkedinput:checkedSelect <input> element whose are checked state3
element:indeterminateinput:indeterminateSelect radio and checkbox button indeterminate state, neither checked nor unchecked3/4

Structural selectors

Pseudo ClassExampleDescriptionCSS
element:root:rootSelect root element of the document3
element:emptydiv:emptySelect all <div> element whose haven't children element even not text node3
element:first-childli:first-childSelect first li element3
element:nth-child(n)li:nth-child(2)Select 2nd number of li element3
element:last-childli:first-childSelect last li element3
element:nth-last-child(n)li:nth-last-child(2)Select 2nd last number of li element3
element:only-childli:only-childSelect li element whose are only one li child element of an parent element3
element:first-of-type:first-of-typeSelect all first of type element3
element:nth-of-type(n):nth-of-type(2)Select 2nd elemen of its type3
element:last-of-type:last-of-typeSelect all last of type element3
element:nth-last-of-type(n):nth-last-of-type(1)Select 1st last element of its type3
element:only-of-typeli:only-of-typeSelect li type element whose are only one li type child element3

Miscellaneous selectors

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