Learn the key difference between pseudo-classes, which style elements in specific states, and pseudo-elements, which style specific parts of an element.
Use the :is() pseudo-class to group multiple selectors and apply shared styles in a more compact and readable way.
Update the styles of sibling elements based on the state of a checkbox input using the :checked pseudo-class, without any JavaScript.
Combine the :hover pseudo-class with the next sibling selector (+) to show and hide a tooltip element on button hover.
Apply styles to a parent element only when it contains specific child elements by using the :has() pseudo-class selector.
Use the :empty pseudo-class combined with the ::before pseudo-element to dynamically insert placeholder text into empty divs.
Implement a dynamic, skewed background highlight for text by inserting and styling content with the ::before pseudo-element.
Combine the ::first-line and ::first-letter pseudo-elements to apply unique typographic styles for a classic drop cap and introductory line effect.
Sensory-Minds GmbH
Offenbach am Main, Germany
1:04:00Chris Heilmann, Daniel Cranney & Zoran Jambor
59:11Chris Heilmann, Daniel Cranney & Justin Halsall & Christian Schaefer
59:20Onur Gumus
1:01:17Chris Heilmann, Daniel Cranney & Niels Leenheer
52:59Chris Heilmann, Daniel Cranney & Keith Cirkel
44:29Elad Shechter
28:00Håkon Wium Lie
59:40Chris Heilmann, Daniel Cranney & Peter Kröner
Jobs that call for the skills explored in this talk.
Turboneer LLC
Mount Morris, United States of America
knowmad Mood
Working Class Heroes
Dordrecht, Netherlands
Thegiglab
Amsterdam, Netherlands
