Advanced CSS Techniques

Master powerful selectors, pseudo-elements, CSS counters, and specificity management to write sophisticated, maintainable stylesheets.

Modern Complex Selectors

CSS has evolved with powerful new selectors that make targeting elements easier and more maintainable. Explore :is(), :where(), and :not().

The :is() Selector

Simplifies complex selector lists by grouping them together — a huge time-saver.

Heading in Section

Heading in Article

Heading in Aside

css

The :where() Selector

Works like :is() but with zero specificity — perfect for base styles you want to easily override.

Default LinkSpecial Link (Overridden)

css

The :not() Selector

Your exclusion tool — style everything except certain elements.

css

Specificity Tip

:is() takes the specificity of its most specific argument, while :where() always has zero specificity. Use :where() for reusable base styles and :is() when you need more control.

Pseudo-elements Deep Dive

Pseudo-elements let you style specific parts of an element or add decorative content without extra HTML. They're your secret weapon for clean, semantic markup.

::before and ::after

The workhorses of pseudo-elements — create decorative elements, badges, and tooltips with CSS alone.

NewProBeta

css

::first-letter and ::first-line

Style the first letter or line of text differently — perfect for drop caps and magazine-style layouts.

Once upon a time, in a web far, far away, there lived a developer who discovered the magic of CSS pseudo-elements. With just a few lines of code, entire design systems came to life, creating beautiful typography without touching a single line of HTML.

css

::selection

Style the appearance of selected text — a small touch that gives your site personality.

Try selecting this text — notice the custom selection colour! This works on any text element and can match your brand colours.

css

CSS Counters

CSS counters let you create automatic numbering without JavaScript. Perfect for step-by-step guides, nested lists, and numbered sections.

Basic Counter

Create numbered items that update automatically when you add or remove elements. No manual renumbering required!

Set up your project structure

Install dependencies

Configure your build tools

Write your first component

Test and deploy

css

Nested Counters

Counters can be nested to create hierarchical numbering like 1.1, 1.2, 2.1. Great for documentation and specifications.

Introduction

Overview

Prerequisites

Setup

Installation

Configuration

Advanced Topics

Optimisation

css

Attribute Selectors

Target elements based on their attributes and attribute values. Incredibly powerful for styling forms, links, and dynamic content.

Basic Attribute Selectors

Match elements that have specific attributes, or attributes with specific values.

css

Advanced Attribute Matching

Use powerful operators to match attribute values partially — perfect for styling external links, file types, or data attributes.

External LinkInternal LinkPDF DocumentImage File

css

Attribute Selector Operators

^= starts with, $= ends with, *= contains, ~= word match, |= starts with (dash-separated). These operators make attribute selectors incredibly flexible!

Combinators & Relationship Selectors

Combinators let you select elements based on their relationship to other elements. Master these and you'll write cleaner, more maintainable CSS.

Descendant Combinator (space)

Selects all descendants, no matter how deeply nested. The most common combinator.

Styled paragraph

Nested styled paragraph

css

Child Combinator (>)

Selects only direct children, not deeper descendants. Great for precise targeting.

Direct child (styled)

Grandchild (not styled)

Direct child (styled)

css

Adjacent (+) and General (~) Siblings

Select elements based on their sibling relationships. Perfect for spacing, alternating styles, and contextual design.

Heading

First paragraph (adjacent to h4)

Second paragraph (general sibling)

Third paragraph (general sibling)

css

Understanding & Managing Specificity

Specificity determines which CSS rules win when multiple rules target the same element. Master it to avoid !important hell.

Specificity Hierarchy

CSS specificity is calculated based on four categories. Understanding this hierarchy is crucial.

1000Inline Styles

100IDs

10Classes, Attributes, Pseudo-classes

1Elements, Pseudo-elements

css

Good vs Bad Specificity

Keep specificity low and consistent. Use classes over IDs, avoid nesting too deeply, and reserve !important for truly exceptional cases.

Good

.button { }
.button-primary { }
.button-large { }

Avoid

#header div.nav ul li a.button { }
.button { color: blue !important; }

css

Specificity Tips

1. Prefer classes over IDs for styling
2. Keep selector chains short (2–3 levels max)
3. Use :where() for zero-specificity base styles
4. Avoid !important unless absolutely necessary
5. Organise CSS from low to high specificity

Best Practices

Key principles for writing advanced, maintainable CSS.

Keep Specificity Low

Use classes for styling, reserve IDs for JavaScript hooks. Flat selectors are easier to maintain and override.

Use Modern Selectors

Embrace :is(), :where(), and :has() to write cleaner, more maintainable selectors.

Leverage Pseudo-elements

Use ::before and ::after for decorative content instead of adding extra HTML elements.

Search pages