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.

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements thumbnail

Checking access…

Playback and chapters load privately for Free videos.

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

Humans in the Loop: Storytelling in Tech thumbnail

Humans in the Loop: Storytelling in Tech

Christian Heilmann +2

3 days ago

WeAreDevelopers LIVE: Your Brain Is Lying to You: Cognitive Biases in Development thumbnail

Your Brain Is Lying to You: Cognitive Biases in Development

Last week

Like Peas in a Pod - What Happens When People Clone Your App? thumbnail

Like Peas in a Pod - What Happens When People Clone Your App?

Ivan Kutskir +2

2 weeks ago

WeAreDevelopers LIVE - Read more, Prompt Less thumbnail

Read more, Prompt Less

Christian Heilmann +2

3 weeks ago

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail

Tech Education in Two Languages

Daniel Cranney +1

Oct 2026

WeAreDevelopers LIVE - Playing in Production thumbnail

Playing in Production

Andrew MacLean +2

Sep 2026

Upcoming sessions on this topic

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

Vidhya Krishnamoorthy

Morgan Stanley

VP, Software Engineering Manager

The UI Engineering Playbook: Modern CSS, Design Systems, Motion & AI-Assisted Workflows

Wadad Parker

Ednius Inc.

SDE

Understanding React Performance Patterns Developers Often Get Wrong

Himanshu Srivastava

Best Buy India

Software Engineer

Built-In AI in the Browser: Practical Capabilities for Modern Web Apps

Piyush Gupta

Expedia

Senior Engineering Manager

Your Server-Rendered App Doesn't Know Who It's Talking To

Anshul Bansal

OLX India

Principal Architect

The Illusion of Green: Why AI-Generated Browser Automation Tests Pass Locally but Fail in CI

Puja Jagani

BrowserStack

Lead of Open Source and Developer Advocacy

Related videos

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

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

Cleyra Uzcategui · JP Morgan & Chase Co.

World Congress · 2024

What's new in CSS for Designers? thumbnail

What's new in CSS for Designers?

Onur Gumus

LIVE · Dec 2023

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail

Is CSS Catching Up to Flash?

Chris Heilmann +2

LIVE · Sep 2026

Can CSS recreate Tufte's designs? thumbnail

Can CSS recreate Tufte's designs?

Håkon Wium Lie

World Congress · 2022

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

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

Chris Heilmann +2

LIVE · May 2025

Component styling in a JS world — evolve your mental model thumbnail

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

JS Congress · 2021

Related articles

DC

Daniel Cranney

Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors

CSS is an essential part of web development. Regardless of which programming language you use, the chances are you know some CSS, too. In this article we're going to help you go beyond the basics a...

almost 2 years ago

Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors

DC

Daniel Cranney

How to Style Other Elements on Hover with the :not() CSS Pseudo Class

A few years back, Stephan Judis wrote about CSS’s :not pseduo-class as it started to gain widespread browser support. Fast forward to 2025, and it’s widely available, but so rarely used. In this a...

over 1 year ago

A computer with :not() on the screen

DC

Daniel Cranney

3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents

If you’ve ever read the WeAreDevelopers Magazine before, you’ll know we love showing developers how to take advantage of native platform features and avoid over-engineering UI’s with frameworks or ...

10 months ago

A woman on a laptop with a table of contents showing on the screen

CH

Chris Heilmann

Building a "shoutout" component in plain HTML/CSS/JavaScript

Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to pos...

over 1 year ago

A rubber ducky with a bullhorn

From learning to earning

Jobs that call for the skills explored in this talk.

about 2 months ago • Verified

Senior Product Engineer

Blacksmith Software

New York, United States

Expert $200k–300k React

Staff Engineer - Web Platform

Expert Remote Next.js ReactJS Amazon S3

Senior UX-Designer:in BundesMessenger

Hamburg, Germany

Expert €71k–91k Git HTML Figma

Product Designer, Web3 Fintech & AI Prototyping

Barcelona, Spain

Figma Web3.js Artificial Intelligence

about 1 month ago

Technical Product Specialist (TPS) - Signals & API

Experienced HTML JIRA Zendesk

Senior Web Software Architect, AI Experiences

TeamViewer Germany GmbH

Austin, TX, United States

Expert ReactJS TypeScript TeamViewer