Dan Cranney
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
09:35 MIN
Understanding the DOM structure and pseudo-elements
View-Transition-API: Gamechanger for hybrid app-development
42:30 MIN
Rediscovering HTML elements and upcoming CSS features
WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more
41:29 MIN
Discussion on the evolution and future of CSS
What's new in CSS for Designers?
10:26 MIN
Core techniques for writing robust and resilient CSS
Future-Proof CSS
23:22 MIN
Using the right tool for the right job for accessibility
Future-Proof CSS
08:25 MIN
The unique challenges of progressive enhancement in CSS
Future-Proof CSS
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
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
59:20What's new in CSS for Designers?
Onur Gumus
44:29Playing Games with CSS
Elad Shechter
40:25How to write a book with CSS
Håkon Wium Lie
28:00Can CSS recreate Tufte's designs?
Håkon Wium Lie
29:40Is CSS Houdini finally usable in 2023?
Tanja Ulianova
37:55Future-Proof CSS
Ire Aderinokun
36:13Kirsty's Excellent Adventure in CSS Grid
Kirsty Burgoine
35:15Extensionator - Rise of the Chromium
Keren Kenzi
From learning to earning
Jobs that call for the skills explored in this talk.
Front end Developer | Usability
Haystack People
Zwanenburg, Netherlands
React
Next.js
JavaScript
TypeScript
Web Developer - Node / Typescript / HTML / SCSS / Liquid / Shopify
Codext GmbH
Ilshofen-Vellberg, Germany
€40K
CSS
HTML
Node.js
JavaScript
+1
Interactive Developer (Javascript, JS Libraries, MVC) &ndash
Thegiglab
Amsterdam, Netherlands
CSS
MVC
Node.js
MooTools
JavaScript