Dan Cranney

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements

Tired of writing JavaScript for simple UI toggles? Discover how to build them with pure CSS using powerful pseudo-classes like `:checked` and `:has()`.

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements
#1about 1 minute

Differentiating between CSS pseudo-classes and pseudo-elements

Learn the key difference between pseudo-classes, which style elements in specific states, and pseudo-elements, which style specific parts of an element.

#2about 1 minute

Simplify complex CSS selectors with the :is pseudo-class

Use the :is() pseudo-class to group multiple selectors and apply shared styles in a more compact and readable way.

#3about 1 minute

Style elements based on a checkbox state with :checked

Update the styles of sibling elements based on the state of a checkbox input using the :checked pseudo-class, without any JavaScript.

#4about 1 minute

Create a pure CSS tooltip with :hover and sibling selectors

Combine the :hover pseudo-class with the next sibling selector (+) to show and hide a tooltip element on button hover.

#5about 1 minute

Conditionally style parent elements using the :has pseudo-class

Apply styles to a parent element only when it contains specific child elements by using the :has() pseudo-class selector.

#6about 1 minute

Insert placeholder content into empty elements with CSS

Use the :empty pseudo-class combined with the ::before pseudo-element to dynamically insert placeholder text into empty divs.

#7about 2 minutes

Create a skewed highlight effect with the ::before pseudo-element

Implement a dynamic, skewed background highlight for text by inserting and styling content with the ::before pseudo-element.

#8about 1 minute

Create newspaper-style text with ::first-line and ::first-letter

Combine the ::first-line and ::first-letter pseudo-elements to apply unique typographic styles for a classic drop cap and introductory line effect.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Understanding the DOM structure and pseudo-elements
03:31 MIN

Understanding the DOM structure and pseudo-elements

View-Transition-API: Gamechanger for hybrid app-development

The rise of natively stylable HTML components in CSS
18:32 MIN

The rise of natively stylable HTML components in CSS

WeAreDevelopers LIVE - Yes, CSS Can Do That!

Pushing the boundaries of CSS as a programming language
08:26 MIN

Pushing the boundaries of CSS as a programming language

WeAreDevelopers LIVE - CSS is DOOMed

Evolving CSS from basic styles to advanced effects
08:04 MIN

Evolving CSS from basic styles to advanced effects

How to write a book with CSS

Rediscovering HTML elements and upcoming CSS features
09:58 MIN

Rediscovering HTML elements and upcoming CSS features

WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

A tour of creative code demos and useful developer tools
11:20 MIN

A tour of creative code demos and useful developer tools

WeAreDevelopers LIVE – PHP Is Alive and Kicking and More

Building resilient and performant CSS-only components
10:00 MIN

Building resilient and performant CSS-only components

NoLoJS - Avoiding JavaScript Cruft with HTML and CSS - Aaron T. Grogg

Featured Partners

Related Videos

See all videos
WeAreDevelopers LIVE - Yes, CSS Can Do That!1:04:00

WeAreDevelopers LIVE - Yes, CSS Can Do That!

Chris Heilmann, Daniel Cranney & Zoran Jambor

What's new in CSS for Designers?59:20

What's new in CSS for Designers?

Onur Gumus

WeAreDevelopers LIVE - CSS is DOOMed59:11

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney & Justin Halsall & Christian Schaefer

Playing Games with CSS44:29

Playing Games with CSS

Elad Shechter

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More59:40

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More

Chris Heilmann, Daniel Cranney & Peter Kröner

Can CSS recreate Tufte's designs?28:00

Can CSS recreate Tufte's designs?

Håkon Wium Lie

How to write a book with CSS40:25

How to write a book with CSS

Håkon Wium Lie

Kirsty's Excellent Adventure in CSS Grid 36:13

Kirsty's Excellent Adventure in CSS Grid

Kirsty Burgoine

Related Articles

View all articles
DC
Daniel Cranney
CSS-Only Scroll-Driven Animations
Scroll-linked animations look slick, but until now it often meant writing a fair amount of JavaScript, scroll event listeners, getBoundingClientRect(), class toggling and so on, with UX benefits often offset by performance downsides. CSS scroll-drive...
CSS-Only Scroll-Driven Animations
DC
Daniel Cranney
The Overflow: 5 CSS Generators and Visual Design Tools
If you’ve read The Overflow before you’ll know it’s where we take some time you show you our favourite tools from around the web that we simply couldn’t fit into the always-packed Dev Digest. This time, we’re looking at five tools for generating CSS ...
The Overflow: 5 CSS Generators and Visual Design Tools
DC
Daniel Cranney
The Overflow: 5 Security and Privacy Tools for Developers
We’re back again with another edition of the Overflow, where we share some of the best tools we’ve found from around the web that we just couldn’t cram into the already jam-packed editions of the Dev Digest. So let’s take a look at five security and ...
The Overflow: 5 Security and Privacy Tools for Developers

From learning to earning

Jobs that call for the skills explored in this talk.

Senior HTML5 Developer

Senior HTML5 Developer

Working Class Heroes
Dordrecht, Netherlands

Senior
CSS
Adobe Flash
ActionScript
Adobe Photoshop