CSS 101: Selectors, Classes & Tags, A Beginner’s Guide

1. What are Selectors in CSS?

CSS selectors are used to select the HTML elements you want to style. There are over 60 selectors and combinators in total, but you'll primarily use just a handful to get productive.

The Three Key Selectors You’ll Use Every Day

• Element (Tag) Selector?

• Class Selector

• Descendant Selector

1.1 What is Element(tag) Selector?

An element selector is the simplest kind of CSS selector. It applies styles to all HTML tags (like <p>, <h1>, <div>, etc.).

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

This means all <p> (paragraph) elements on the page will have blue text with 18px size.

When to Use It: Good for global styling (e.g., all paragraphs, all headings).

Not Good for: Specific styling of a single element. Use a class for that.

1.2 What Is a Class Selector?

A class selector styles specific elements that have the same class name. You define a class in CSS using a dot (.) before the name.

HTML:

<p class="highlight">This paragraph is special.</p>

<p>This is a normal paragraph.</p>

CSS:

.highlight {
  color: red;
  font-weight: bold;
}

Only the paragraph with class="highlight" turns red and bold.

Key Points:

• Reusable on multiple elements.

• An element can have multiple classes (separate with spaces).
  

Example: Styling Buttons

HTML:

<button class="btn">Click Me</button>
<button class="btn danger">Delete</button>

CSS:

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.danger {
  background-color: red;
}

Result:
The first button will be blue. The second button, which has both .btn and .danger, will be red with the same padding and rounded corners.

Quick Tip:

• Good class names: .btn-primary, .card, .highlight

• Bad class names: .red-text, .box1, .something

Why? Because styles may change later — naming based on purpose, not color or position, makes the code easier to maintain.

1.3 What Is a Descendant Selector?

A descendant selector targets elements inside another element, no matter how deeply nested. It’s written as a space between two selectors.

HTML:

<div class="container">
  <p>This is inside the container.</p>
</div>
<p>This is outside the container.</p>

CSS:

.container p {
  color: green;
}

Result:
Only the paragraph inside .container will be green, while the paragraph outside .container is unaffected.

Why Use It?

• Helps target specific sections or areas.

• Keeps styles organized and modular.

• Prevents global styling.

Best Practices:

• Style sections in context (e.g., nav menus, articles, footers).

• Combine with classes for reusable patterns.

• Don’t: Over-nest selectors (e.g., .header .nav .menu .item p), as it becomes hard to read and maintain.

Real-World Example: Navigation Menu

HTML:

<nav class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

Result:
Only the <a> links inside .navbar are styled.

1.4 What is an ID Selector?

An ID selector targets an element with a unique id attribute. IDs should only be used once per page.

#main-title {
  font-size: 2rem;
}

Result:
Only the element with id="main-title" will be affected.

Use: Linking, JavaScript, not for general styling.

2. What are Combinators In CSS?

Combinators target elements based on their relationships to other elements.

2.1 What Is a Child Combinator (>)?

ul > li {
  list-style: square;
}

Result:
Only direct <li> children of <ul> will have a square list-style.

2.2 What Is an Adjacent Sibling Combinator (+)?

h1 + p {
  font-style: italic;
}

Result:
The first <p> immediately after an <h1> will have italic text.

2.3 What Is a General Sibling Combinator (~)?

h2 ~ p {
  color: gray;
}

Result:
All <p> elements that come after an <h2> (with the same parent) will be gray.

3. What Are Pseudo-Classes in CSS?

Pseudo-classes select elements based on their state or position.

:hover: When the mouse is over an element.

button:hover {
  background: blue;
}

:focus: When an element has keyboard focus.

input:focus {
  outline: 2px solid orange;
}

:nth-child(n): Target based on order.

li:nth-child(2) {
  color: red;
}

:disabled: For disabled form elements.

button:disabled {
  opacity: 0.5;
}

4. What Are Pseudo-Elements?

Pseudo-elements style parts of an element.

::before: Injects content before an element.

h1::before {
  content: "★ ";
  color: gold;
}

::after: Injects content after an element.

h1::after {
  content: " ★";
  color: gold;
}

::first-line: Styles only the first line of text.

p::first-line {
  font-weight: bold;
}

Example: Putting Everything Together

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Selectors Demo</title>
  <style>
    /* --- Selectors --- */
   *{
    box-sizing: border-box;  
    }

    body {
      font-family: sans-serif;
      background: #f5f5f5;
      padding: 2rem;
    }

    .card {
      background: white;
      border: 2px solid #ddd;
      border-radius: 8px;
      padding: 1rem 1.5rem;
      width: 280px;
      margin: auto;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s;
    }

    /* --- Pseudo-class (hover effect) --- */
    .card:hover {
      transform: translateY(-5px);
      border-color: #0077cc;
    }

    /* --- ID selector --- */
    #main-title {
      font-size: 1.4rem;
      color: #0077cc;
    }

    /* --- Attribute selector --- */
    a[target="_blank"] {
      color: #e63946;
    }

    /* --- Combinators --- */
    .card ul > li {
      margin: 0.25rem 0;
    }

    .card h2 + p {
      font-style: italic;
      color: #555;
    }

    /* --- Pseudo-class nth-child --- */
    .card li:nth-child(2) {
      color: #0077cc;
      font-weight: bold;
    }

    /* --- Pseudo-elements --- */
    .card h2::before {
      content: "★ ";
      color: gold;
    }
    .card h2::after {
      content: " ★";
      color: gold;
    }
  </style>
</head>
<body>

  <div class="card">
    <h2 id="main-title">Welcome</h2>
    <p>Hover over this card to see the effect.</p>
    <ul>
      <li>First item</li>
      <li>Second item (styled with nth-child)</li>
      <li>Third item</li>
    </ul>
    <p>Check out <a href="https://example.com" target="_blank">this link</a>.</p>
  </div>

</body>
</html>

What’s Happening:

• Selectors: .card, #main-title, a[target="_blank"]
  
  

• Combinators: ul > li (direct children), h2 + p (paragraph right after the heading)
  
  

• Pseudo-classes: :hover (for the card), :nth-child(2) (for the list item)
  
  

• Pseudo-elements: ::before and ::after add gold stars around the heading.
  

 How Do I Practice CSS Selectors?

To really master CSS selectors, start applying them step by step in your HTML file. This hands-on approach will help you visualize how different selectors impact your styles, and you'll quickly gain confidence in writing clean, professional CSS.

What’s Next?

Now that you've learned how to select elements in CSS, it’s time to dive into the basic CSS properties (e.g., colors, text, backgrounds, and spacing) that matter most!