| Element / Type Selector |
body, main, p |
All instances of an HTML element |
Global styling for tags like paragraphs, headings, sections |
| Class Selector |
.hero |
Any element with the specified class |
Reusable component styling |
| ID Selector |
#theme-toggle |
The element with the specified ID |
Unique page elements, JS hooks |
| Universal Selector |
* |
All elements |
Global resets, box-sizing rules |
| Attribute Selector |
input[type="text"] |
Elements matching an attribute/value |
Form styling, external links, accessibility hooks |
| Descendant Selector |
.hero p |
Matching descendants inside another element |
Style nested content within a component |
| Child Selector |
nav > ul |
Direct children only |
Prevent deep nesting from inheriting styles |
| Adjacent Sibling Selector |
h2 + p |
First sibling immediately after another |
Style intro paragraphs after headings |
| General Sibling Selector |
h2 ~ p |
All later sibling matches |
Apply styles to grouped related siblings |
| Pseudo-Class |
a:hover, li:first-child |
Elements in a specific state |
Hover effects, structural targeting, form states |
| Pseudo-Element |
::before, ::after |
Part of an element / generated content |
Decorative icons, overlays, custom bullets |
| Grouped Selector |
h1, h2, h3 |
Multiple selectors at once |
Apply shared styling efficiently |
| Compound Selector |
button.primary |
Elements matching multiple conditions |
Target specific variants of components |
| Complex Selector |
main .hero > h1 |
Combination of relationship selectors |
Highly specific structural targeting |