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

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

6:02 min

Exploring advanced CSS features for modern component styling

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
7 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
12 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

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
12 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
19 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres thumbnail
7:41
20 days ago

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres

Chris Heilmann, Daniel Cranney

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
about 1 month ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

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

TYPO3 CMS Project Lead at TYPO3

Benni Mack
Open session

World Congress 2026 North America

September 23, 2026 · 14:20–14:50

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

Content Platforms: The Bottleneck Is Responsibility, Not Tech

Daniel Fau, Tom Warwick

Daniel Fau
Tom Warwick
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 6

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova

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

Can CSS recreate Tufte's designs? thumbnail
28:00
World Congress 2022 • about 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 • about 4 years ago

Future-Proof CSS

Ire Aderinokun

Playing Games with CSS thumbnail
44:29
World Congress 2021 • about 5 years ago

Playing Games with CSS

Elad Shechter

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.