🌼 Day 14 — CSS Selectors (Deep Dive)

Hey guys, Welcome to Day 14! 🌻 Yesterday, you learned about the box model and spacing. In Today’s lesson is a crucial one — **CSS Selectors**. Selectors are the foundation of CSS — they decide *which HTML elements* your styles apply to. The more powerful your selector knowledge, the cleaner and more flexible your design code becomes.

🧩 1️⃣ What Are Selectors?

Selectors are patterns used to “select” HTML elements based on their name, id, class, attributes, or relationships. Every CSS rule starts with a selector followed by declarations.

selector {
  property: value;
}

Example:

p {
  color: #f9a825;
}

This targets all paragraph elements and makes their text yellow.

📘 2️⃣ Types of CSS Selectors

Element Selector

Targets all elements of a specific type.

h1 {
  text-align: center;
}

Class Selector

Targets elements with a specific class name.

.highlight {
  background-color: #fff9c4;
}

Usage:

<p class="highlight">This is highlighted text.</p>

ID Selector

Targets a unique element with an ID attribute.

#main-title {
  color: #f57f17;
  font-size: 24px;
}

Universal Selector

Targets *all* elements on the page.

* {
  margin: 0;
  padding: 0;
}

🔗 3️⃣ Attribute Selectors

Attribute selectors let you style elements based on their attributes or attribute values.

input[type="text"] {
  border: 2px solid #f9a825;
}
a[target="_blank"] {
  color: orange;
}

🌿 4️⃣ Grouping and Combining Selectors

Grouping

Apply the same style to multiple elements:

h1, h2, h3 {
  color: #fbc02d;
}

Descendant Selector

Targets elements nested inside another.

div p {
  color: gray;
}

Child Selector

div > p {
  color: #f57f17;
}

🎯 5️⃣ Pseudo-classes

Pseudo-classes define styles for special element states — hover, focus, visited, etc.

a:hover {
  color: #fbc02d;
}
input:focus {
  border-color: #f9a825;
}
li:first-child {
  color: red;
}

🧩 6️⃣ Pseudo-elements

Pseudo-elements let you style specific parts of elements.

p::first-line {
  font-weight: bold;
}
p::first-letter {
  font-size: 30px;
  color: #f57f17;
}

🧠 7️⃣ Practice Task

1. Use class and ID selectors to style a profile card.
2. Apply pseudo-classes to buttons (hover, focus, active).
3. Use attribute selectors to style form fields differently.

🧮 Mini Quiz

• Q1: What’s the difference between class and ID selectors?
• Q2: Which pseudo-class targets the first list item?
• Q3: Can you combine attribute and class selectors?

🎯 Summary

Selectors are the heart of CSS. Mastering them allows precise control and reusability in your designs. In the next session, you’ll dive into **Display, Visibility & Flow**, learning how elements behave and align in a web layout.

← Prev Next →