1. Universal Selector (*)
Selects all elements on the page.
CSS Example
* { color: green; }2. Type Selector (div, p)
Targets specific HTML tags.
CSS Example
p { color: blue; }3. Class Selector (.class)
Targets elements with a specific class attribute.
CSS Example
.highlight { background: yellow; }4. ID Selector (#id)
Targets a single element with a unique ID.
CSS Example
#unique { font-size: 20px; color: red; }5. Grouping Selector (,)
Applies the same styles to multiple selectors.
CSS Example
h1, h2 { color: purple; }6. Descendant Selector ( )
Targets elements inside another element.
CSS Example
div p { color: orange; }7. Child Selector (>)
Targets direct children only.
CSS Example
div > p { font-weight: bold; color: blue; }8. Adjacent Sibling (+)
Targets the immediate sibling element.
CSS Example
h1 + p { color: red; }9. General Sibling (~)
Targets all siblings after an element.
CSS Example
h1 ~ p { color: brown; }10. Attribute Selectors
Targets elements based on attributes.
CSS Example
[title] { color: teal; } [type="text"] { border: 1px solid black; }11. Pseudo-classes (:hover, :nth-child())
Targets elements in specific states.
CSS Example
a:hover { color: red; } li:nth-child(2) { color: blue; }12. Pseudo-elements (::before, ::after)
Targets virtual elements before or after real content.
CSS Example
p::before { content: "👉 "; } p::after { content: " ✅"; }