Below table displays that in how many ways we can select any element in CSS to style them.
Selector | Description |
|---|---|
| * | Any Element |
| A | Element of Type “A” |
| A.redColor | Element “A” whose class is “redColor” |
| A#India | Element “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:visited | Element “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:focus | Element “A” during certain user actions |
| A::first-line | the first formatted line of an “A” element |
| A:target | Element “A” being the target of the referring URI |
| A::first-letter | the first formatted letter of an Element “A” |
| A::before | generated content before an Element “A” |
| A::after | generated 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-child | Element “A”, first child of its parent |
| A:last-child | Element “A”, last child of its parent |
| A:first-of-type | Element “A”, first sibling of its type |
| A:last-of-type | Element “A”, last sibling of its type |
| A:only-child | Element “A”, only child of its parent |
| A:only-of-type | Element “A”, only sibling of its type |
| A:empty | Element “A” that has no children |
| A:root | Element “A”, root of the document |
| A:enabled, A:disabled | a user interface element “A” which is enabled or disabled |
| A:checked | a 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 B | Element “B” descendant of Element “A” |
| A > B | Element “B” child of Element “A” |
| A + B | Element “B” immediately preceded by Element “A” |
| A~B | Element “B” preceded by an Element “A” |
Drop a line if you have any feedback or question.
Leave a Reply