Search

Nalezeno "selectors": 48

Re-Working the CSS Almanac

19.9.2024
Getting right to it: the CSS-Tricks Almanac got a big refresh this week! I’m guessing you’re already familiar with this giant ol’ section of CSS-Tricks called the Almanac. This is where we publish references for CSS selectors and properties… Re-Working the CSS Almanac...

CSS Selectors

15.7.2024
A complete guide covering all of the various methods we have to select elements in CSS and how to use them for applying styles. CSS Selectors originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter

“If” CSS Gets Inline Conditionals

9.7.2024
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that … “If” CSS Gets Inline Conditionals originally published...

Case Insensitive CSS Attribute Selector

19.6.2024
CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case!...

JavaScript closest

5.7.2023
When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and querySelector/querySelectorAll for that relationship in selectors. What if we want to find an element’s parent based on selector? To look up the element tree and find...

More Real-World Uses for :has()

20.1.2023
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 … More Real-World Uses for :has() originally published on CSS-Tricks, which is part...

:has is an unforgiving selector

11.1.2023
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 … :has is an unforgiving selector originally...

Taming the Cascade With BEM and Modern CSS Selectors

21.11.2022
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 … Taming the Cascade With BEM and Modern CSS Selectors...

@supports selector()

19.10.2021
I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support … The post @supports selector() appeared first...

7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS

21.9.2021
CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input>). This effectively allows you to show something on a web page that might … The post 7 Practical Uses...

You want enabling CSS selectors, not disabling ones

31.8.2021
I think this is good advice from Silvestar Bistrović: An enabling selector is what I call a selector that does a job without disabling the particular rule. The classic example is applying margin to everything, only to have to remove … The post You want enabling CSS selectors, not disabling...

Meet `:has`, A Native CSS Parent Selector

12.7.2021
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, … The post Meet `:has`,...

WDRL — Edition 290: CSS Flexgrids, image performance and selectors

1.7.2021
Hey, this time we’re going to look deeply into a lot of CSS articles together with optimising images. In CSS, we get nice tools that help us create better layouts, faster. We also look at new technologies like parent selectors, like responsive images in CSS, reverting CSS settings and container...

Chromium spelling and grammar features

29.6.2021
Delan Azabani digs into the (hopefully) coming soon ::spelling-error and ::grammar-error pseudo selectors in CSS. Design control is always nice. Hey, if we can style scrollbars and style selected text, why not this? The squiggly lines that indicate...

Can I :has()

4.6.2021
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) { … The post Can I :has() appeared first...

:where() has a cool specificity trick, too.

30.3.2021
There is a lot of hype on the :is() pseudo-selector lately, probably because now that Safari 14 has it, it’s supported across all the major browsers. You’ve got Miriam tweeting about it, Kevin Powell doing a video, Šime … The post :where() has a cool specificity trick, too....

Tools for Auditing CSS

29.3.2021
Auditing CSS is not a common task in a developer’s everyday life, but sometimes you just have to do it. Maybe it’s part of a performance review to identify critical CSS and reduce unused selectors. Perhaps is part of effort … The post Tools for Auditing CSS appeared first on CSS-Tricks. You...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace