SUMMARY:
-
Example code (element, class, ID, and combined selectors).
-
Explanation of differences between class and ID.
-
Explanation of specificity (priority order) in CSS.
Full Example: Element, Class, ID,
and Combined Selectors
<!DOCTYPE html><html><head> <style> /* ELEMENT SELECTORS */ h1 { color: darkblue; font-size: 36px; text-align: center; }
h2 { color: green; font-size: 28px; text-decoration: underline; }
h3 { color: crimson; font-style: italic; }
/* CLASS SELECTOR */ .example { background-color: lightgray; border-left: 4px solid orange; padding: 8px; font-family: Arial, sans-serif; }
/* ID SELECTOR */ #unique { color: white; background-color: purple; font-weight: bold; padding: 10px; border-radius: 6px; }
/* COMBINED SELECTORS */ h2.example { background-color: yellow; color: black; font-style: italic; }
p#unique { border: 2px dashed red; } </style></head><body> <!-- ELEMENT SELECTOR --> <h1>Main Title (styled by h1 element selector)</h1> <h2>Subtitle (styled by h2 element selector)</h2> <h3>Section Heading (styled by h3 element selector)</h3>
<!-- CLASS SELECTOR --> <p>This paragraph is plain.</p> <p class="example">This paragraph is styled by the .example class.</p>
<!-- ID SELECTOR --> <p id="unique">This paragraph is styled by the #unique ID selector.</p>
<!-- COMBINED SELECTORS --> <h2 class="example">This h2 uses BOTH element (h2) + class (.example)</h2> <p id="unique">This p uses BOTH element (p) + id (#unique)</p></body></html>Explanation of Selectors
1. Element Selectors (e.g., h1, h2, p)
-
Target HTML tags directly.
-
Apply styles to all such elements automatically.
-
Example:
h2 { color: green; }→ affects every<h2>.
2. Class Selectors (.classname)
-
Declared with
class="example". -
Can be reused for many elements.
-
Good for grouping elements that share the same style.
-
Example:
<p class="example">Paragraph 1</p> <p class="example">Paragraph 2</p>
3. ID Selectors (#idname)
-
Declared with
id="unique". -
Should be unique → only one element per page.
-
Used for styling or JavaScript targeting of one special element.
-
Example:
<p id="unique">Special paragraph</p>
4. Combined Selectors
-
More specific targeting.
-
h2.example→ only affects<h2 class="example">. -
p#unique→ only affects<p id="unique">.
🔹 CSS Specificity (Priority Order)
When multiple styles apply to the same element, CSS decides which one wins by specificity:
-
Inline styles (inside the tag:
<p style="color:red">) → highest priority. -
ID selectors (
#unique) → stronger than class or element. -
Class selectors (
.example) → stronger than element selectors. -
Element selectors (
h1,p) → weakest.
👉 Example:
If we have:
p { color: blue; }.example { color: green; }#unique { color: red; }And the HTML is:
<p id="unique" class="example">Hello</p>➡️ The text will be red, because ID > class > element.
💡 Analogy:
-
Element selector = apply to everyone wearing “t-shirts.”
-
Class selector = apply to everyone in the “basketball team.”
-
ID selector = apply to “student with ID card #123.”
-
If one person fits all categories → the most specific rule wins.
CSS Specificity Hierarchy
▲ Highest priority
│
│ Inline Styles (style="")
│ ------------------------
│ ID Selectors (#id)
│ ------------------------
│ Class Selectors (.class)
│ Attribute Selectors ([type="text"])
│ Pseudo-classes (:hover, :first-child)
│ ------------------------
│ Element Selectors (h1, p, div)
│ Pseudo-elements (::before, ::after)
│
▼ Lowest priority
Comments