WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Nov 27, 2024

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements

Dan Cranney

Stop over-relying on JavaScript for simple UI states. Master advanced CSS selectors to build pure-CSS interactive components and drastically reduce DOM clutter.

Pause
Mute Enter Fullscreen
#1 about 1 min

Core differences between pseudo classes and pseudo elements

The fundamental characteristics distinguishing how specific structural sub-parts of elements are targeted versus standard dynamic interaction states.

#2 about 2 min

Grouping element styles with the is pseudo class

How to condense redundant target blocks and apply shared styling formats robustly across grouped button categories securely.

#3 about 2 min

Styling elements dynamically using the checked pseudo class

Updating visual properties of layout neighbors reliably dependent on underlying form checkbox ticks without deploying frontend logic.

#4 about 1 min

Combining hover pseudo classes with the next sibling selector

Unveiling hidden tooltip components dynamically by securely chaining cursor hovering thresholds directly onto nearby structural document nodes.

#5 about 1 min

Conditional parent styling using the has pseudo class

Injecting targeted layout foundations and container aesthetics proactively contingent on particular required graphical subsets registering internally.

#6 about 2 min

Inserting automatic placeholders using the empty pseudo class

Preventing broken aesthetic bounds by automatically rendering supplementary warning wording wherever standard component contents natively evaluate vacant.

#7 about 2 min

Generating text highlights using the before pseudo element

Producing stylized background offsets immediately placed preceding designated text content elements utilizing absolutely anchored layer injections sequentially.

#8 about 2 min

Formatting typography layouts with first line and letter elements

Building stylized drop caps and natively tracked introductory heading leads replicating printed publication formatting without rewriting structure semantics.

Matching moments

6:57 min

Replacing JavaScript interactions with native CSS features

Chris Heilmann +2 · LIVE

7:10 min

Testing CSS property knowledge and layout engine quirks

Chris Heilmann +2 · LIVE

6:14 min

Rediscovering forgotten and highly useful HTML elements

Chris Heilmann +2 · LIVE

4:53 min

Exploring advanced DOM selection capabilities using CSS attributes

Chris Heilmann +2 · LIVE

5:17 min

Navigating the growing complexity of modern CSS architecture

Chris Heilmann +2 · LIVE

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
8 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
15 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
17 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
22 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
24 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
29 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 24, 2026 · 16:00–18:00

Stage 10

Reprompting the Wheel? Why AI Won’t Save Your Content Platform

Benni Mack, Tom Warwick

Benni Mack
Tom Warwick
Open session

World Congress 2026 North America

September 23, 2026 · 13:00–13:30

Stage 2

Build Interactive Copilot Experiences with Canvas Extensions

James Clancey

Principal Product Manager at GitHub

James Clancey
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

September 25, 2026 · 12:55–13:25

Stage 5

Not managing your content platform is surrendering your data to someone else.

Daniel Fau, Tom Warwick

Daniel Fau
Tom Warwick
Open session

World Congress 2026 North America

September 24, 2026 · 13:30–14:00

Stage 6

It's Not Vibe Coding If You Know What You're Doing

Sean O'Dell, Jeff Blankenburg

Sean O'Dell
Jeff Blankenburg

Related videos

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

What's new in CSS for Designers? thumbnail
59:20
LIVE • almost 3 years ago

What's new in CSS for Designers?

Onur Gumus

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
LIVE • 8 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

Can CSS recreate Tufte's designs? thumbnail
28:00
World Congress 2022 • over 4 years ago

Can CSS recreate Tufte's designs?

Håkon Wium Lie

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more thumbnail
1:10:55
LIVE • over 1 year ago

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

Chris Heilmann, Daniel Cranney, Jason Pamental

Future-Proof CSS thumbnail
37:55
World Congress 2022 • over 4 years ago

Future-Proof CSS

Ire Aderinokun

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.