Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

💡 CSS Tip! A small tool to create a quantity query selector using has(). Adjust the setting and get your selector in no time! 😎 I am trying a new kind of "interactive CSS Tip". Let me know what you think. Link in the reply 👇

CSS by T. Afif

14,039 subscribers

19,823 views • 1 year ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

1 Comments

Artur Bień1 year ago

Love it. Very handy

Related Videos

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

AdirCode

66,369 views • 3 years ago

How to use the :where CSS selector to solve specificity problems ↓

How to use the :where CSS selector to solve specificity problems ↓

Sebastiano Guerriero

61,881 views • 1 year ago

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,809 views • 2 years ago

Move over Sass! CSS Selector Nesting dropped in Chrome Stable today.

Move over Sass! CSS Selector Nesting dropped in Chrome Stable today.

Wes Bos

114,736 views • 3 years ago

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

55,548 views • 3 years ago

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

Michael Andreuzza

69,293 views • 1 year ago

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,063 views • 3 years ago

The & in a CSS nested selector doesn't need to come at the start! Needed to style an element based on parent AND child selectors and this was the ticket. Good idea or nah?

The & in a CSS nested selector doesn't need to come at the start! Needed to style an element based on parent AND child selectors and this was the ticket. Good idea or nah?

Wes Bos

15,810 views • 8 months ago

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,272 views • 3 years ago

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 views • 2 years ago

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,545 views • 2 years ago

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

228,661 views • 3 years ago

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,292 views • 2 years ago

CSS Tip! 🤙 You could use CSS :has() to power a context-aware custom cursor experience 👆 :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! 👇

CSS Tip! 🤙 You could use CSS :has() to power a context-aware custom cursor experience 👆 :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

261,705 views • 3 years ago

I wrote a Cursor Figma MCP server to make it easier for AI copilots to implement designs. It's not perfect, but the resulting HTML and CSS is a lot cleaner than giving AI a screenshot and having it guess. Link in the replies, take it for a spin and let me know what you think!

I wrote a Cursor Figma MCP server to make it easier for AI copilots to implement designs. It's not perfect, but the resulting HTML and CSS is a lot cleaner than giving AI a screenshot and having it guess. Link in the replies, take it for a spin and let me know what you think!

Graham Lipsman

102,418 views • 1 year ago

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.

Addy Osmani

79,653 views • 2 years ago

SA2 Skin Selector mod is now available! Swap skin in real time after adding them to the mod! (Download link in reply!)

SA2 Skin Selector mod is now available! Swap skin in real time after adding them to the mod! (Download link in reply!)

Sora

86,751 views • 1 year ago

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Wes Bos

31,135 views • 1 year ago

My motivational tip of the day ! A new day and a chance to get better in pursuit of your goals .

My motivational tip of the day ! A new day and a chance to get better in pursuit of your goals .

Dick Vitale

26,338 views • 1 year ago

Bolt Rules extension, built in bolt.new - open-source (clone it, make changes, help me fix the scroll pls) - changes prompts when in a project or starting a new one - tool selector dropdowns link below

Bolt Rules extension, built in bolt.new - open-source (clone it, make changes, help me fix the scroll pls) - changes prompts when in a project or starting a new one - tool selector dropdowns link below

Ben Tossell

60,681 views • 1 year ago