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.

Selector
Description
*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.

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *

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