CSS Tutorial 8: Advanced Selectors & Pseudo-elements

Lesson 8 Review

We previously learned how to animate elements using Transitions and Keyframes. However, up until now, we have only targeted elements by their basic tag name, class, or ID. Today, we learn how to target elements based on their mathematical position, their relationships to other elements, and even how to create "fake" HTML elements using only CSS.

Step 1: CSS Combinators (Targeting Relationships)

Combinators explain the relationship between two selectors. If you have a complex webpage, adding a custom class="" to every single paragraph is terrible engineering. Instead, we use combinators to target elements based on where they live in the HTML structure.

• Descendant Selector (Space): div p targets EVERY paragraph that lives anywhere inside a div, even if it is nested deeply inside other tags.
• Child Selector (>): div > p targets ONLY the paragraphs that are direct, immediate children of the div.
• Adjacent Sibling Selector (+): h1 + p targets ONLY the very first paragraph that sits immediately after an h1 tag.

The HTML & CSS: Child vs Descendant

<!-- HTML -->
<div class="container">
  <p>I am a direct child.</p>
  <section>
    <p>I am a descendant, but NOT a direct child.</p>
  </section>
</div>

/* CSS */
.container > p {
  background-color: #2ecc71; /* Highlights ONLY the direct child green */
  color: white;
}

The Output:

I am a direct child.

Inner Section

I am a descendant, but NOT a direct child.

Step 2: Attribute Selectors

You can target elements based entirely on their HTML attributes. This is incredibly useful for styling forms without adding extra classes.

• [type="text"] targets all text input fields.
• [href^="https"] targets all anchor links whose href attribute starts with "https" (meaning external links).

The HTML & CSS: Styling Specific Inputs

<!-- HTML -->
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">

/* CSS */
/* We only want to style the text field, not the password field! */
input[type="text"] {
  border: 2px solid #4C8BF5;
  background-color: #e1f5fe;
}

The Output:

Step 3: Structural Pseudo-classes (nth-child)

If you have a table or a list with 100 rows, and you want every alternating row to have a gray background (to make it easier to read), you do not write 50 classes. You use the :nth-child() pseudo-class.

The :nth-child() selector uses math to select elements based on their position in the HTML.

• :nth-child(even) or :nth-child(odd) selects alternating elements.
• :nth-child(3) selects exactly the 3rd element.
• :nth-child(3n) selects every 3rd element (3, 6, 9, 12...).

The HTML & CSS: Striped List

<!-- HTML -->
<ul class="data-list">
  <li>Row 1</li>
  <li>Row 2</li>
  <li>Row 3</li>
  <li>Row 4</li>
</ul>

/* CSS */
.data-list li:nth-child(odd) {
  background-color: #e1f5fe; /* Highlights rows 1 and 3 */
}

The Output:

• Row 1
• Row 2
• Row 3
• Row 4

Step 4: Pseudo-elements (::before and ::after)

This is one of the most advanced and powerful concepts in CSS. A pseudo-element allows you to generate new content on the screen that does not actually exist in your HTML code.

Instead of cluttering your HTML with empty <div> or <span> tags just to hold decorative icons or tooltips, CSS creates a "virtual" element.

The Absolute Requirement: For ::before or ::after to work, you MUST include the content property in your CSS. If you forget content: "";, the browser will not generate the virtual element.

Let's build a fully functional Tooltip using ONLY CSS. We will combine position: absolute (from Tutorial 5), opacity (from Tutorial 8), and the ::after pseudo-element.

The HTML & CSS: A Pure CSS Tooltip

<!-- HTML -->
<div class="my-button">Hover for Info</div>

/* CSS */
/* 1. Set the main button to relative so it traps the absolute tooltip */
.my-button {
  position: relative;
  display: inline-block;
}

/* 2. Create the virtual tooltip using ::after */
.my-button::after {
  content: "I am generated by CSS!"; /* REQUIRED */
  position: absolute;
  bottom: 120%; /* Pushes it above the button */
  background-color: #e74c3c;
  color: white;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s;
}

/* 3. When hovering on the button, make the ::after element visible */
.my-button:hover::after {
  opacity: 1;
}

The Output (Hover over the dark box below):

Hover for Info

Final Quiz: Test Your Advanced CSS Logic

Click the buttons below to verify your knowledge.

1. What is the difference between the `div p` selector and the `div > p` selector?

A) They are identical; both select all paragraphs inside a div.

Incorrect. The `>` symbol enforces a stricter relationship rule.

B) `div p` selects ANY paragraph inside the div. `div > p` selects ONLY paragraphs that are direct children of the div.

Correct! If a paragraph is nested inside a `<section>` which is inside the `<div>`, the `>` combinator will ignore it, because it is a grandchild, not a direct child.

C) `div > p` selects the paragraph that is physically larger than the div.

Incorrect. Combinators represent structural relationships in the HTML DOM tree, not visual sizes.

2. If you want to apply a gray background to every EVEN row in a table, which CSS selector should you use?

A) tr:nth-child(even)

Correct! The `:nth-child()` structural pseudo-class accepts keywords like "even" and "odd" to calculate alternating patterns dynamically.

B) tr[row="even"]

Incorrect. This implies you physically added an HTML attribute called `row="even"` to your tags. The point of structural CSS is to avoid doing that.

C) tr::after(even)

Incorrect. `::after` is a pseudo-element used to generate new content, not a pseudo-class used to select existing elements.

3. You wrote CSS for a `::before` pseudo-element, but nothing is showing up on the screen. What CSS property did you most likely forget to include?

A) display: block;

Incorrect. Pseudo-elements are inline by default, but they will still show up without `display: block`.

B) position: absolute;

Incorrect. You often use absolute positioning with pseudo-elements, but it is not required to make them render.

C) content: "";

Correct! The `content` property is the mandatory heart of a pseudo-element. Even if you just want to draw an empty decorative square, you must explicitly declare `content: "";` for the browser to render the virtual HTML node.