Mastodawn

#Development #Cheatsheets
Styling highlight-y pseudo-elements · Which texts they target and how to customize them https://ilo.im/16a75e

_____
#Text #Highlighting #PseudoElements #Usability #Accessibility #Browsers #WebDev #Frontend #HTML #CSS

Styling ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks

The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that.

CSS-Tricks

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend Jan 13

Simulating Crop Marks

https://fed.brid.gy/r/https://frontendmasters.com/blog/simulating-crop-marks/

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend Mar 31, 2025

Reanimating the CSS Day Buttons

https://fed.brid.gy/r/https://frontendmasters.com/blog/reanimating-the-css-day-buttons/

Reanimating the CSS Day Buttons – Frontend Masters Blog

These buttons animate from a square to an arrow, and we look at three different ways to do it, each with their own upsides.

Inautilo Aug 15, 2023

#Development #Cheatsheets
CSS selectors: A visual guide · Usage of CSS selectors and pseudo-classes/elements at a glance https://ilo.im/14qx8b

_____
#WebDev #Frontend #CSS #CssSelectors #PseudoClasses #PseudoElements #Visualization

CSS Selectors: A Visual Guide & Reference

Visual guide to CSS selectors, including pseudo-classes (:nth-child, :hover,...), functional pseudo-classes (:not, :is,...) and pseudo-elements.

fffuel.co

CSS-Tricks Dec 20, 2022

The CSS :has Selector (and 4+ Examples) https://css-tricks.com/the-css-has-selector/"The CSS :has Selector (and 4+ Examples)"

The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().

#:has #:is #:not #pseudoelements