Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
selectors

13 Articles
{
,

}
Direct link to the article @supports selector()
:where @supports cross-browser selectors

@supports selector()

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 …

Avatar of Chris Coyier
Chris Coyier on Oct 19, 2021
Direct link to the article You want enabling CSS selectors, not disabling ones
margin selectors

You want enabling CSS selectors, not disabling ones

Direct Link

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 …

Avatar of Chris Coyier
Shared by Chris Coyier on Aug 31, 2021 (Updated on Sep 1, 2021)
Direct link to the article CSS Vocabulary
selectors terminology

CSS Vocabulary

This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are “selector,” “property,” and “value,” but even as a person who writes …

Avatar of Chris Coyier
Chris Coyier on Jul 27, 2020
Direct link to the article A Use Case for a Parent Selector
parent selectors selectors

A Use Case for a Parent Selector

Having a “parent selector” in CSS is mentioned regularly as something CSS could really use. I feel like I’ve had that thought plenty of times myself, but then when I ask my brain for a use case, I find it …

Avatar of Chris Coyier
Chris Coyier on Dec 31, 2019 (Updated on Mar 5, 2021)
Direct link to the article Could Grouping HTML Classes Make Them More Readable?
classes HTML selectors semantics

Could Grouping HTML Classes Make Them More Readable?

You can have multiple classes on an HTML element:

<div class="module p-2"></div>

Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply:

.module { }
.p-2 { }
const div = document.querySelector("div");
…
Avatar of Chris Coyier
Chris Coyier on Apr 22, 2019
Direct link to the article CSS Selectors are Conditional Statements
selectors

CSS Selectors are Conditional Statements

Direct Link

.foo {

}

Programmatically, is:

if (element has a class name of "foo") {

}

Descendent selectors are && logic and commas are ||. It just gets more complicated from there, with things like combinators and pseudo selectors. Just …

Avatar of Chris Coyier
Shared by Chris Coyier on Dec 6, 2018
Direct link to the article One Invalid Pseudo Selector Equals an Entire Ignored Selector
::selection pseudo elements selectors

One Invalid Pseudo Selector Equals an Entire Ignored Selector

Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example:

div, span::butt {
  background: red;
}

Even though div is a perfectly valid selector, span:butt is not, thus the entire …

Avatar of Chris Coyier
Chris Coyier on Oct 5, 2018 (Updated on Dec 14, 2020)
Direct link to the article Selectors That Depend on Layout
selectors

Selectors That Depend on Layout

Direct Link

“Why the heck don’t we have ::first-column?”

I heard someone ask that the other day and it’s a valid question. I’d even take that question further by asking about ::nth-column() or whatever else relates to CSS columns. We …

Avatar of Chris Coyier
Shared by Chris Coyier on Oct 2, 2018
JavaScript selectors

“Stop Using CSS Selectors for Non-CSS”

I saw Nicole Dominguez tweet this the other day:

say it louder for the people in the backhttps://t.co/prDKo5QaZi

— nicole (@sodevious) January 11, 2018

I wasn’t at this conference, so I have very little context. Normally, I’d consider it …

Avatar of Chris Coyier
Chris Coyier on Jan 16, 2018
Sass sass maps selectors

Use a Sass Variable for a Selector

Say you need to use a certain selector in multiple places in your code. It’s not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors …

Avatar of Chris Coyier
Chris Coyier on Jan 2, 2017
nesting Sass selectors

inStyle (Modifying the Current Selector `&` in Sass)

The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I’ve experienced many times. You’re happily nesting in Sass. You’re maybe a level or …

Avatar of Filip Naumovic
Filip Naumovic on May 27, 2016 (Updated on Aug 3, 2021)
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Agency Coaching
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top