🎯 CSS Selectors – Targeting the Right Elements

📅 November 9, 2025

✍️ By Evans

Hey, welcome back! 👋

At this point in my CSS journey, I had learned how to add CSS to a webpage — inline, internal, and external. But soon, I realized that styling everything with the same color or font wasn’t enough. I needed a way to target specific elements and style them differently.

That’s where CSS selectors came in — the real superpower of CSS. They help you tell the browser exactly which parts of your HTML you want to style. From single elements to entire groups, selectors are like the GPS system of CSS. 🗺️

💡 What Are Selectors?

Selectors are the part of a CSS rule that identifies which element (or elements) the styles apply to.Every CSS rule starts with a selector, followed by curly braces {} that hold the styling instructions.

Example:

p { 
    color: darkblue;
    font-size: 18px; 
}
                        

Here, p is the selector. It targets all <p> elements on the page and makes them dark blue with a font size of 18px.

🧩 Types of CSS Selectors I Learned

1. Element Selector

   Targets all instances of a specific HTML element.

   
   h1 {
       color: purple; 
       text-align: center; 
   }
                                   

   This styles all <h1> elements equally.

2. Class Selector

   Targets elements with a specific class attribute. You use a dot (.) before the class name.

   
   .highlight {
       background-color: yellow;
       color: black;
   }
                                   

   HTML example:

   
   <p class="highlight">This paragraph is highlighted!</p>
                                   

   You can reuse the same class on multiple elements — it’s perfect for repeating styles.

3. ID Selector

   Targets a specific element with a unique id. You use a hash symbol (#) before the name.

   
   #main-title {
       color: crimson;
       font-size: 28px;
   }
                                   

   HTML example:

   
   <h1 id="main-title">Welcome to My Blog</h1>
                                   

   Only one element should use a particular ID.

4. Universal Selector

   Targets everything on the page.

   
   * {
       margin: 0; padding: 0;
       box-sizing: border-box; 
   }
                                   

   I use this to reset default browser styles — it gives me a clean starting point.

5. Grouping Selector

   argets multiple elements at once by separating them with commas..

   
   h1, h2, h3 { 
       color: navy; 
   }
                                   

   This is a great way to avoid repeating the same rules.

🧱 Combining Selectors – Getting More Specific

Once I got comfortable, I started combining selectors to target elements more precisely.

Example:

article p { 
    color: gray; 
}
                        

This only styles <p> elements that are inside an <article> tag.

Or even more specific:

ul li a { 
    color: green; 
}
                        

That line styles all <a> links inside list items inside unordered lists.

It felt like I was building CSS “sentences” that describe exactly what I wanted to change! ✍️

🔗 Class vs ID – The Big Difference

At first, I used them interchangeably (😅 big mistake).

Here’s what I learned:

• Use classes (.) when you want to reuse a style on multiple elements.
• Use IDs (#) when you’re styling something unique.

Example:

<h1 id="hero-title">My Blog</h1> 
<p class="intro">Welcome to my world of coding!</p> 
<p class="intro">CSS makes this fun!</p>
                        

The ID is only used once for the title, but the class is reused for both paragraphs.

🧠 Attribute Selectors – Styling by Attribute

This blew my mind when I first found it!

You can target elements based on their attributes.

Example:

input[type="text"] { 
    border: 2px solid blue; 
}
                        

This rule only styles text input fields, not buttons or checkboxes.

You can even style links based on their destination:

a[target="_blank"] { 
    color: red; 
}
                        

That was the moment I realized CSS could be as smart as I wanted it to be.

⚠️ Mistakes I Made Early On

• ❌ Forgot the dot before class names (highlight instead of .highlight).
• ❌ Used the same ID on multiple elements (it broke styles).
• ❌ Added spaces in selectors like .main title instead of .main-title.
• ❌ Didn’t understand nesting — and styled things unintentionally.

Every mistake helped me understand CSS logic more clearly.

💬 Pro Tip I Learned

When debugging your CSS, open the browser’s Developer Tools (Inspect Element) and hover over the styles tab. You can see exactly which selector is being applied — and even test new ones live! 🔍

It’s like seeing how the browser “thinks.”

🎨 How Selectors Changed My Workflow

Before selectors, I used to add inline styles everywhere — it was chaos.

Now, with selectors, I can group styles, control elements across the whole page, and make changes faster.

Selectors gave me the power to control design with precision — like a painter choosing where every color goes. 🎨

🎯 Final Thoughts

Learning about CSS selectors was a total game changer for me.

It turned styling from guesswork into logic. I could finally target what I want and leave the rest alone.

Next, I’ll dive into something even more colorful — Colors in CSS 🎨 — exploring color names, HEX, RGB, and HSL formats.

See you there!

— Evans 💻