CSS Selectors
What we are studying in this article:
Why CSS selectors are needed
Element selector
Class selector
ID selector
Group selectors
Descendant selectors
Basic selector priority (very high level)
1. Why CSS selectors are needed
CSS selectors are used to select HTML elements so we can apply styles to them.
Without selectors, CSS wouldn’t know which element to style.
this tells the browser make all <p> elements blue.
2. Element Selector
An element selector targets all HTML elements of a specific type
styles all <h1> elements.
3. Class Selector
A class selector targets elements that have a specific class attribute
HTML
CSS
4. ID Selector
An ID selector targets one unique element.
HTML
CSS
5. Group Selector
Group selectors apply the same styles to multiple selectors.
CSS
Reduced repeated CSS
6. Descendant Selector
A descendant selector selects elements inside another element.
style <p> elements that are inside a <div>.
7. Basic Selector priority
When multiple CSS rules target the same element, priority (specificity) decides which one applies.
Simple priority order (low → high):
Element selector
Class selector
ID selector
Inline styles