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

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Automating video post-production with local scripts
02:54 MIN

Automating video post-production with local scripts

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building a one-time code input with semantic HTML
03:35 MIN

Building a one-time code input with semantic HTML

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

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

What's new in CSS for Designers?

Onur Gumus

What’s New and What’s Next in Web UI22:46

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

Cleyra Uzcategui

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more1:10:55

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

Chris Heilmann, Daniel Cranney & Jason Pamental

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Playing Games with CSS44:29

Playing Games with CSS

Elad Shechter

Angular tips/tricks you can use from tomorrow on50:28

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Tips and Tricks for Working with JSON08:30

Tips and Tricks for Working with JSON

Dan Cranney

Related Articles

View all articles
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 article, we’re going to dig into the :not pseudo class...
How to Style Other Elements on Hover with the :not() CSS Pseudo Class
DC
Daniel Cranney
Creating a Spotlight Text Effect with CSS and JavaScript
Every now and then it’s fun to build something small just to get a better grip on a concept, and this one’s a great example. We’ll explore how to make a simple spotlight text effect that helps you understand how to follow the cursor, use CSS variable...
Creating a Spotlight Text Effect with CSS and JavaScript
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
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 post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript

From learning to earning

Jobs that call for the skills explored in this talk.