Courses/HTML & CSS/Advanced Selectors

Advanced CSS Selectors

Lesson 12 • Expert Track

What You'll Learn

Pseudo-classes: :hover, :focus, :nth-child, :not()

Pseudo-elements: ::before, ::after, ::first-letter

Combinators: descendant, child, sibling selectors

Attribute selectors: [href], [type='email'], [class*='btn']

Form state selectors: :valid, :invalid, :checked

Build a styled list and form with zero extra classes

💡 Think of It Like This

Basic selectors are like addressing a letter to "John". Advanced selectors are like saying "the third John who lives on Main Street, but only when he's at home." They give you surgical precision — you can target any element based on its state, position, attributes, or relationship to other elements.

1. Pseudo-classes — Targeting Element States

Pseudo-classes select elements based on their current state — whether they're hovered, focused, the first child, or match a pattern.

Category	Selector	What It Targets
Interactive	`:hover`	Mouse is over element
	`:focus`	Element has keyboard focus
	`:active`	Element is being clicked
	`:visited`	Link has been visited
Position	`:first-child`	First child of parent
	`:last-child`	Last child of parent
	`:nth-child(n)`	Nth child (odd, even, 3n, 2n+1)
	`:not(selector)`	Everything except the selector
Form	`:checked`	Checked checkbox/radio
	`:valid / :invalid`	Form validation state
	`:disabled`	Disabled form element

Pseudo-classes in Action

See :hover, :nth-child, :first-child, and :not() at work

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Pseudo-classes</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 30px;
      color: #e5e7eb;
    }

    h3 { color: #22c55e; margin: 25px 0 10px; }

    /* Styled list with nth-child */
    ul { list-style: none; padding: 0; max-width: 400px; }

    li {
      padding: 12px 16px;
      border-radius: 6px;
      margin: 4px 0;
      transition: all 0.2s;
    }

    /* Alternate row colours */
   
...

2. Pseudo-elements — Virtual Content

Pseudo-elements create virtual elements that don't exist in the HTML. They're perfect for decorative content, icons, and styling parts of text.

Pseudo-element	What It Does
`::before`	Inserts content before element (requires `content`)
`::after`	Inserts content after element (requires `content`)
`::first-letter`	Styles only the first letter of text
`::first-line`	Styles only the first line of a paragraph
`::selection`	Styles highlighted/selected text

Pseudo-elements

Add decorative content and style text parts without extra HTML

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Pseudo-elements</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 30px;
      color: #e5e7eb;
    }

    h3 { color: #22c55e; margin: 25px 0 10px; }

    /* ::before and ::after */
    .quote {
      background: #1e293b;
      padding: 20px 25px;
      border-radius: 8px;
      font-style: italic;
      font-size: 1.1rem;
      position: relative;
      margin: 15px 0;
    }

    .quote::before 
...

3. Combinators — Relationship Selectors

Combinators target elements based on their relationship to other elements in the DOM tree.

Combinator	Syntax	Targets
Descendant	`div p`	All p elements inside div (any depth)
Child	`div > p`	Only direct child p elements of div
Adjacent sibling	`h2 + p`	First p immediately after h2
General sibling	`h2 ~ p`	All p elements after h2 (same parent)

4. Attribute Selectors

Target elements based on their HTML attributes — incredibly useful for styling links, inputs, and data attributes.

Selector	Matches	Example Use
`[href]`	Has the attribute	Any element with href
`[type="email"]`	Exact match	Email inputs only
`[href*="youtube"]`	Contains substring	Links containing "youtube"
`[href^="https"]`	Starts with	Secure links
`[href$=".pdf"]`	Ends with	PDF download links

Attribute Selectors

Style links, inputs, and elements based on their attributes

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Attribute Selectors</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 30px;
      color: #e5e7eb;
    }

    h3 { color: #22c55e; margin: 25px 0 10px; }

    .links { display: flex; flex-direction: column; gap: 8px; max-width: 400px; }

    a {
      display: block;
      padding: 12px 16px;
      background: #1e293b;
      color: #94a3b8;
      text-decoration: none;
      border-radius: 6px;
 
...

⚠️ Common Mistakes

Confusing : and :: — Single colon :hover is a pseudo-class (state). Double colon ::before is a pseudo-element (virtual content).
Forgetting content for ::before/::after — These pseudo-elements require the content property, even if it's empty: content: "";
Over-specific selectors — div.container ul li a:hover is overly specific and fragile. Keep selectors as short as possible.
Using :nth-child when you mean :nth-of-type — :nth-child(2) targets the 2nd child regardless of type. :nth-of-type(2) targets the 2nd element of that specific type.

🎉 Lesson Complete

You now have surgical precision when targeting CSS elements:

✅ Pseudo-classes target states: :hover, :focus, :nth-child, :not()
✅ Pseudo-elements create virtual content: ::before, ::after, ::first-letter
✅ Combinators target relationships: child (>), sibling (+, ~)
✅ Attribute selectors target by attribute: [href$=".pdf"], [type="email"]

Advanced CSS Selectors

What You'll Learn

💡 Think of It Like This

1. Pseudo-classes — Targeting Element States

Pseudo-classes in Action

2. Pseudo-elements — Virtual Content

Pseudo-elements

3. Combinators — Relationship Selectors

4. Attribute Selectors

Attribute Selectors

⚠️ Common Mistakes

🎉 Lesson Complete

Cookie & Privacy Settings