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 Chris Heilmann +2 · LIVE

7:10 min

Testing CSS property knowledge and layout engine quirks

Chris Heilmann Chris Heilmann +2 · LIVE

6:14 min

Rediscovering forgotten and highly useful HTML elements

Chris Heilmann Chris Heilmann +2 · LIVE

4:53 min

Exploring advanced DOM selection capabilities using CSS attributes

Chris Heilmann Chris Heilmann +2 · LIVE

5:17 min

Navigating the growing complexity of modern CSS architecture

Chris Heilmann Chris Heilmann +2 · LIVE

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
about 13 hours ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
7 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
22 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
29 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
30 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
about 1 month ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

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 • 22 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

Component styling in a JS world — evolve your mental model thumbnail
41:28
JS Congress • almost 5 years ago

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.