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.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Discussion on the evolution and future of CSS
17:51 MIN

Discussion on the evolution and future of CSS

What's new in CSS for Designers?

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Highlighting useful developer tips and tools
06:49 MIN

Highlighting useful developer tips and tools

WeAreDevelopers LIVE - GraalVM in action, Static Analysis insights and more

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Core techniques for writing robust and resilient CSS
04:55 MIN

Core techniques for writing robust and resilient CSS

Future-Proof CSS

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Improving typography and layout with modern CSS properties
03:31 MIN

Improving typography and layout with modern CSS properties

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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Using the right tool for the right job for accessibility
04:46 MIN

Using the right tool for the right job for accessibility

Future-Proof CSS

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

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

Playing Games with CSS44:29

Playing Games with CSS

Elad Shechter

How to write a book with CSS40:25

How to write a book with CSS

Håkon Wium Lie

Can CSS recreate Tufte's designs?28:00

Can CSS recreate Tufte's designs?

Håkon Wium Lie

Is CSS Houdini finally usable in 2023?29:40

Is CSS Houdini finally usable in 2023?

Tanja Ulianova

Future-Proof CSS37:55

Future-Proof CSS

Ire Aderinokun

Kirsty's Excellent Adventure in CSS Grid 36:13

Kirsty's Excellent Adventure in CSS Grid

Kirsty Burgoine

Extensionator - Rise of the Chromium35:15

Extensionator - Rise of the Chromium

Keren Kenzi

Related Articles

View all 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 and explore the power of pseudo elements and pseudo se...
Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors
CH
Chris Heilmann
Dev Digest 133 - Back to Front
News and ArticlesWeAreDevelopers LIVE WebDev Day is on Wednesday, 18/11/2024. Learn about Design-first APIs for UI components, the JavaScript event loop, the Secret sauce behind pattern matching and Vision for websites as well as win a chance to take...
Dev Digest 133 - Back to Front
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript