Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
:has

10 Articles
{
,

}
:has CSS selector
Direct link to the article The Power of :has() in CSS
:has CSS

The Power of :has() in CSS

Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but has gained popularity in the front end community by delivering control …

Avatar of Chris DeMars
Chris DeMars on Mar 29, 2024 (Updated on Apr 19, 2024)
Direct link to the article More Real-World Uses for :has()
:has

More Real-World Uses for :has()

The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey. The ability to write selectors upside down …

Avatar of Liam Johnston
Liam Johnston on Jan 20, 2023 (Updated on Jan 23, 2023)
Direct link to the article Solved With :has(): Vertical Spacing in Long-Form Text
:has typography

Solved With :has(): Vertical Spacing in Long-Form Text

If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely had to write CSS to manage the vertical spacing between different …

Avatar of Liam Johnston
Liam Johnston on Jan 18, 2023
Direct link to the article :has is an unforgiving selector
:has :is :where specificity

:has is an unforgiving selector

A little thing happened on the way to publishing the CSS :has() selector to the ol’ Almanac. I had originally described :has() as a “forgiving” selector, the idea being that anything in its argument is evaluated, even if one or …

Avatar of Geoff Graham
Geoff Graham on Jan 11, 2023
Direct link to the article Taming the Cascade With BEM and Modern CSS Selectors
:has :is :where bem cascade specificity

Taming the Cascade With BEM and Modern CSS Selectors

BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is – at least in my Twitter bubble – one of the better-liked CSS methodologies.

Personally, I think …

Avatar of Liam Johnston
Liam Johnston on Nov 21, 2022 (Updated on Jan 17, 2023)
Direct link to the article Creating Animated, Clickable Cards With the :has() Relational Pseudo Class
:has pseudo elements

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It’s often referred to it as “the parent selector” — as in, we can select style a parent element from a …

Avatar of Brecht De Ruyte
Brecht De Ruyte on Oct 25, 2022 (Updated on Oct 27, 2022)
Direct link to the article Implicit Grids, Repeatable Layout Patterns, and Danglers
:has grid implicit grid nth-child

Implicit Grids, Repeatable Layout Patterns, and Danglers

Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it?

The specific situation is when a layout grid expects …

Avatar of Geoff Graham
Geoff Graham on Aug 2, 2022
Direct link to the article Meet `:has`, A Native CSS Parent Selector
:has parent selectors

Meet `:has`, A Native CSS Parent Selector

The reasons that are often cited that make container queries difficult or impossible is things like infinite loops—e.g. changing the width of an element, invalidating a container query, which changes the width again, which makes the container query take effect, …

Avatar of Chris Coyier
Chris Coyier on Jul 12, 2021
Direct link to the article Can I :has()
:has parent selectors

Can I :has()

I just joked that we’re basically getting everything we want in CSS super fast (mostly referring to container queries, my gosh, can you imagine they are actually coming?). Now we might actually get parent selectors?! As in .parent:has(.child) { …

Avatar of Chris Coyier
Chris Coyier on Jun 4, 2021
Direct link to the article The CSS :has Selector (and 4+ Examples)
:has :is :not pseudo elements

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().
Avatar of Robin Rendle
Robin Rendle on Mar 17, 2021 (Updated on Dec 20, 2022)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top