Complete CSS Selector Tutorial for the beginners

Below table displays that in how many ways we can select any element in CSS to style them.

*Any Element
AElement of Type “A”
A.redColorElement “A” whose class is “redColor”
A#IndiaElement “A” which have id as “India”
A[bar]Element “A” with attribute “bar”
A[bar=”Mum”]Element “A” which have attribute as “bar” whose value is exactly equal to “Mum”
A[bar~=”Mum”]Element “A” whose “bar” attribute value is a list of whitespace-separated values, one of which is exactly equal to “Mum”
A[bar^=”Mum”]Element “A” whose “bar” attribute value begins exactly with the string “Mum”
A[bar$=”Mum”]Element “A” whose “bar” attribute value ends exactly with the string “Mum”
A[bar*=”Mum”]Element “A” whose “bar” attribute value contains the substring “Mum”
A:link, A:visitedElement “A” being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
A:active, A:hover, A:focusElement “A” during certain user actions
A::first-linethe first formatted line of an “A” element
A:targetElement “A” being the target of the referring URI
A::first-letterthe first formatted letter of an Element “A”
A::beforegenerated content before an Element “A”
A::aftergenerated content after Element “A”
A:nth-child(n)Element “A”, the n-th child of its parent
A:nth-last-child(n)Element “A”, the n-th child of its parent, counting from the last one
A:nth-of-type(n)Element “A”, the n-th sibling of its type
A:nth-last-of-type(n)Element “A”, the n-th sibling of its type, counting from the last one
A:first-childElement “A”, first child of its parent
A:last-childElement “A”, last child of its parent
A:first-of-typeElement “A”, first sibling of its type
A:last-of-typeElement “A”, last sibling of its type
A:only-childElement “A”, only child of its parent
A:only-of-typeElement “A”, only sibling of its type
A:emptyElement “A” that has no children
A:rootElement “A”, root of the document
A:enabled, A:disableda user interface element “A” which is enabled or disabled
A:checkeda user interface element “A” which is checked (for example a radio-button or checkbox)
A:not(s)Element “A” that does not match simple selector s
A BElement “B” descendant of Element “A”
A > BElement “B” child of Element “A”
A + BElement “B” immediately preceded by Element “A”
A~BElement “B” preceded by an Element “A”

Read more from w3 org.

Drop a line if you have any feedback or question.





Related Posts


One response to “Complete CSS Selector Tutorial for the beginners”

  1. duhhh Avatar

    this is not a tutorial. its a reference guide

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading