Quartz 4

CSS Selectors

5 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

🎯 CSS Selectors: A Complete Guide

🧠 What Are CSS Selectors?

CSS selectors are patterns used to select HTML elements you want to style. Think of them like filters or targeting mechanisms: they help the browser know “what” to apply the styles to.

CSS syntax looks like this:

selector {
  property: value;
}

  • The selector tells the browser which element(s) to style.

  • The property is the aspect of the element you want to change (e.g., color, font size).

  • The value is the new setting for that property.

📘 Types of CSS Selectors

There are several kinds of CSS selectors, each with a specific use case.

1. Element Selector (Type Selector)

Use: Targets all instances of a specific HTML tag.

h1 {
  color: blue;
}

✅ This will turn all <h1> elements on the page blue.

🧠 Analogy: Like saying “all books with red covers” — you don’t care about which book specifically, just that they all have a red cover.

🛠️ Use case: General styling for commonly used tags (p, h1, h2, li, etc.)

2. Class Selector

Use: Targets any element with a specific class.

.red-text {
  color: red;
}

Then in HTML:

<h2 class="red-text">Hello</h2>
<p class="red-text">World</p>

✅ Both elements will be red.

💡 Key Points:

  • Begins with a dot . in the CSS.

  • Reusable: Can apply to multiple elements.

  • Not restricted to a single tag type.

🧠 Analogy: Like labeling items with a sticky note “For Sale” — regardless of what the item is (chair, table, lamp), you can group them together.

🛠️ Use case: When multiple elements share the same style — great for scalability.

3. ID Selector

Use: Targets a single unique element with a specific ID.

#main {
  color: green;
}

Then in HTML:

<h2 id="main">Welcome</h2>

✅ Only this one element will turn green.

💡 Key Points:

  • Begins with a hashtag # in the CSS.

  • Should only be used once per page.

  • More specific than class selectors.

🧠 Analogy: Like a social security number — it should be unique and apply to one person.

🛠️ Use case: Styling a specific, one-off section or component (e.g., main header).

4. Attribute Selector

Use: Targets elements based on attributes and their values.

p[draggable] {
  color: purple;
}

✅ All <p> elements with the draggable attribute will turn purple.

You can also target specific values of attributes:

p[draggable="false"] {
  color: red;
}

✅ Only <p> tags where draggable="false" will be styled.

💡 Key Points:

  • Written in square brackets [ ].

  • Can filter by presence of an attribute or specific value.

🧠 Analogy: Like filtering products on an e-commerce site by attribute: “Color: Red” or “Size: Large”.

🛠️ Use case: Conditional styling — great when working with data attributes or advanced interactivity.

5. Universal Selector

Use: Targets ALL elements on the page.

* {
  text-align: center;
}

✅ Everything will be center-aligned.

💡 Key Points:

  • Uses an asterisk *.

  • Can be dangerous if overused because it’s very broad.

  • Useful for resets or global styles.

🧠 Analogy: Like a “Select All” command.

🛠️ Use case: Setting base styles, or aligning everything in a container.

🎯 Practical Exercise Summary

Scenario: You have an index.html file and an external stylesheet style.css.

Tasks:

You’re instructed not to modify HTML but instead apply CSS selectors to achieve visual results. Here’s what you had to do:

✅ TODO 1: Style all paragraph (<p>) tags

p {
  color: red;
}

  • Selector Used: Element selector

  • ✅ Turns all <p> text red.

✅ TODO 2: Style all elements with a class of .larger-text

.larger-text {
  font-size: 20px;
}

  • Selector Used: Class selector

  • ✅ Affects multiple elements (not just paragraphs or headings).

✅ TODO 3: Style an element with a unique ID #green-id

#green-id {
  color: green;
}

  • Selector Used: ID selector

  • ✅ Only affects one specific list item.

✅ TODO 4: Style li elements with attribute value="4"

li[value="4"] {
  color: blue;
}

  • Selector Used: Attribute selector

  • ✅ Affects only the list item whose value attribute is set to 4.

✅ TODO 5: Align all text in the document to the center

* {
  text-align: center;
}

  • Selector Used: Universal selector

  • ✅ Everything is now center-aligned.

⚖️ Specificity: A Sneak Peek

You may have noticed that when multiple styles applied to one element (e.g., via a class and ID), the more specific selector wins.

This concept is called CSS Specificity.

  • ID selectors > class selectors > element selectors

  • Inline styles > external styles (if present)

  • More specific = higher priority

📌 We’ll explore this in more detail in advanced CSS topics (Section 7).

🧪 Pro Tip: When to Use Which Selector?

Selector TypeWhen to Use
ElementGeneral styles for tags (like p, h1, etc.)
ClassReusable styles across multiple elements
IDUnique one-off styles
AttributeTarget elements based on properties or special conditions
UniversalApply base/global styles or initial setup (e.g., reset)

🔚 Conclusion

You now have a powerful toolkit of CSS selectors to precisely style different parts of your HTML document. Whether you’re applying a global reset or surgically styling a single element, selectors are your go-to tool for control and elegance.

✅ Key Takeaways:

  • Selectors = targeters

  • Element, Class, ID, Attribute, Universal = 5 key types

  • Understanding how selectors work is crucial to writing clean, scalable CSS

References

Graph View

Backlinks