CSS selectors define the elements to which a set of CSS rules apply.
| Selector | Syntax Example | Description |
|---|---|---|
| Universal selector | * { | Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. |
| Type selector | p { | Selects all elements that have the given node name. |
| Class selector | .gallery_img { | Selects all elements that have the given class attribute. |
| ID selector | #profile_img { | Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. |
| Attribute selector | [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] { | Selects all elements that have the given attribute. |
| Selector list | h1, p { | The , selector is a grouping method that selects all the matching nodes. (selects "h1" and "p") |
| Descendant combinator | section p { | The " " (space) combinator selects nodes that are descendants of the first element. (selects "p" in example because it is a descendant of "section") |
| Selector chaining | p.gallery_img { | Selects elements which match all criteria in chain. (selects "p" elements which contain class ".gallery_img" in example) |
| Child combinator | ul > li { | The > combinator selects nodes that are direct children of the first element. (selects "li" in the example) |
Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors.