How to use CSS :has and :not - Future CSS!

preview_player
Показать описание
-- Today, I'm going to show you how to use the up and coming CSS psuedo-classes of :has and :not. If you use Safari, you can use these already. If you're on Windows (at the time of uploading this video), I'll show you in the video and below how to start experimenting with these.

0:00 - Intro
0:57 - Learn UI/UX Interactively
1:44 - Can I Use?
2:25 - Windows Users
3:31 - HTML
5:25 - Basic CSS
6:34 - Using :Has
8:50 - Using :Not with :Has
11:33 - Final Thoughts

#css #frontend #futurecss

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!
  1. DesignCourse
  2. css has
  3. css has tutorial
  4. css not
  5. css not tutorial
  6. css has psuedo-class
Рекомендации по теме
The new CSS 0:13:50

The new CSS pseudo-classes explained - :is() :where() :has()

How to use 0:12:16

How to use CSS :has and :not - Future CSS!

Learn CSS :not() 0:05:48

Learn CSS :not() and :has() selector in 6 Minutes

:has() opens up 0:14:30

:has() opens up new possibilities with CSS

CSS :has - 0:11:40

CSS :has - Use JS Less and CSS More - 10 Real World Use Cases

(Finally) Understanding the 0:31:32

(Finally) Understanding the CSS :has Selector

CSS :has selector 0:26:48

CSS :has selector is Amazing! | How to use the CSS :has selector

In-Depth Guide to 0:09:40

In-Depth Guide to CSS Parent Selector :has()

How To Detect 0:20:35

How To Detect Memory Leaks In Your Web App (2025)

10 CSS Pro 0:09:39

10 CSS Pro Tips - Code this, NOT that!

These CSS PRO 0:08:48

These CSS PRO Tips & Tricks Will Blow Your Mind!

CSS - The 0:05:57

CSS - The power of :has()

Mastering :has() to 0:15:38

Mastering :has() to Expand Your CSS Skills

CSS Tutorial — 0:06:35

CSS Tutorial — Selectors, Element, Class and ID (3/13)

24+ ESSENTIAL CSS 0:08:13

24+ ESSENTIAL CSS Properties Every Web Developer Should Know

6: How Do 0:18:03

6: How Do We Include CSS In Our HTML | Learn HTML and CSS | Learn HTML & CSS Full Course

CSS is, where, 0:16:34

CSS is, where, and has pseudo classes

Transform your web 0:00:15

Transform your web pages with our seamless background animation generator! #css #cssanimation #code

🔥 Use CSS 0:01:00

🔥 Use CSS :has() to select items based on what children they have.

Learn CSS in 0:23:44

Learn CSS in 20 Minutes

Use this instead 0:00:48

Use this instead of :focus in your css

The closest thing 0:09:29

The closest thing we have to a CSS parent selector

Improve Your CSS 0:00:54

Improve Your CSS With Variables / Custom Properties

Power of CSS 0:00:13

Power of CSS Web design like pro #htmlfullcourse #htmlfulltutorial #htmlcss #javascript #css #coding

Комментарии
Автор

How would you rate your level of proficiency with CSS?

DesignCourse
Автор

I’m freakin’ dying for full Chrome support of :has. So stoked.

wreckshopmedia
Автор

I love this feature! Also, it's time for you to change the subscriber amount on your website again at the bottom of your site (
Introducing your Teacher, Gary Simon). From 800k+ t0 900k+

Havii
Автор

So basically it is like css version of if/else ?

Pouncedd
Автор

I think this could be useful for styling dynamic content. But for these cases you could just use the appropriate selector.

I卄卂尺几乇乇
Автор

Hey Gary! Wassup? U r bringing nice stuffs from past 1 months. Good research 😀 cool man ♥️♥️ loved this and that drop-down menu especially 🔥🔥

frictiongraphics
Автор

I love the song at the end of the video 😄😃

Nisa-Julie
Автор

For the past 3 days, I have trying to install figma but it isn't responding

godfredacquah-hz
Автор

are these still under flags for chrome and firefox

philip
Автор

A 12 min video about an experimental feature that may or may not be shipped to all browsers 🙄

Smiley