CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Pseudo Class Selector


What is 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 Class Example Description CSS
* * {font-size:24px} Select all element, set all element font-size 24px 2

Tag Name Selector

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

Class/ID selector

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

Combinators selectors

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

Logical selectors

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

Attribute selectors

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

Substring Attribute selectors

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

Hyperlink selectors

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 curently 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

User Action selectors

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

User Interface State selectors

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

Structural selectors

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

Miscellaneous selectors

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