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
09:35 MIN

Understanding the DOM structure and pseudo-elements

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

Rediscovering HTML elements and upcoming CSS features
42:30 MIN

Rediscovering HTML elements and upcoming CSS features

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

Discussion on the evolution and future of CSS
41:29 MIN

Discussion on the evolution and future of CSS

What's new in CSS for Designers?

Core techniques for writing robust and resilient CSS
10:26 MIN

Core techniques for writing robust and resilient CSS

Future-Proof CSS

Using the right tool for the right job for accessibility
23:22 MIN

Using the right tool for the right job for accessibility

Future-Proof CSS

The unique challenges of progressive enhancement in CSS
08:25 MIN

The unique challenges of progressive enhancement in CSS

Future-Proof CSS

Interactive tools for learning CSS and visualizing data
43:39 MIN

Interactive tools for learning CSS and visualizing data

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Exploring new functionality for the CSS attr() function
06:24 MIN

Exploring new functionality for the CSS attr() function

The weekly developer show: Boosting Python with CUDA, CSS Updates & Navigating New Tech Stacks

Featured Partners

Related Videos

See all videos
What’s New and What’s Next in Web UI22:46

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

Cleyra Uzcategui

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

What's new in CSS for Designers?

Onur Gumus

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

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

Tips and Tricks for Working with JSON08:30

Tips and Tricks for Working with JSON

Dan Cranney

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

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

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

From learning to earning

Jobs that call for the skills explored in this talk.