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

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

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

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

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
Open session

World Congress 2026 North America

Your Brain Is Lying to You: Cognitive Biases in Development

Kate Astrid

Senior Product Engineer

Kate Astrid
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves

Related videos

What’s New and What’s Next in Web UI thumbnail
22:46
WWC 2024 • almost 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 • over 2 years ago

What's new in CSS for Designers?

Onur Gumus

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

Future-Proof CSS

Ire Aderinokun

Playing Games with CSS thumbnail
44:29
WWC 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.