https://css-tricks.com/you-want-enabling-css-selectors-not-disabling-ones/

Skip to main content
 
CSS-Tricks

  * Articles
  * Videos
  * Almanac
  * Newsletter
  * Guides
  * Books

Search Account
margin selectors

You want enabling CSS selectors, not disabling ones

Avatar of Chris CoyierAvatar of Chris Coyier
Chris Coyier on Aug 31, 2021

Learn Development at Frontend Masters

I think this is good advice from Silvestar Bistrovic:

    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 it from the final element because it adds space in a place you
don't want.

.card {
  margin-bottom: 1rem;
}

/* Wait but not on the last one!! */
.parent-of-cards :last-child {
  margin-bottom: 0;
}

You might also do...

/* "Disabling" rule */
.card:last-child {
  margin-bottom: 0;
}

But that's maybe not as contextual as selecting from the parent.

Another variation is:

.card:not(:last-of-child) {
  margin-bottom: 1rem;
}

That's what Silvestar refers to as "enabling" because you're only
ever applying this rule -- not applying it and then removing it with
another selector later. I agree that's harder to understand and
error-prone.

Yet another example is a scoped version of Lobotomized Owls:

/* Only space them out if they stack */
.card + .card {
  margin-top: 1rem;
}

I think gap is where this is all headed in the long term. Put the
onus on the parent, not the child, and keep it an enabling selector:

.parent-of-cards {
  display: grid;
  gap: 1rem;
}

Direct Link -

Our Learning Partner
Frontend Masters logo
Frontend Masters

Wanna learn CSS from a course?

Frontend Masters has a full CSS learning path with multiple courses
depending on how you want to approach it. There is an in-depth course
covering all of CSS, a Sass-specific course, a course on modern
layouts, and a course on SMACSS, a approach to CSS architecture.

Frontend Masters logo

Wanna learn CSS from a course?

Frontend Masters has a full CSS learning path with multiple courses
depending on how you want to approach it. There is an in-depth course
covering all of CSS, a Sass-specific course, a course on modern
layouts, and a course on SMACSS, a approach to CSS architecture.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked 
*

        [                                             ]
        [                                             ]
        [                                             ]
        [                                             ]
        [                                             ]
        [                                             ]
        [                                             ]
Comment [                                             ]

Name * [                              ]

Email * [                              ]

Website [                              ]

[ ] Save my name, email, and website in this browser for the next
time I comment.

[*]Get the CSS-Tricks newsletter

[Post Comment] 

Copy and paste this code: micuno * [4.1                 ]

Leave this field empty [                    ]

[                                             ]
[                                             ]
[                                             ]
[                                             ]
[                                             ]
[                                             ]
[                                             ]
[                                             ]
Jetpack Logo

The related posts above were algorithmically generated and displayed
here without any load on our servers at all, thanks to Jetpack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Email Address [                    ] [Subscribe]
Tech

  * WordPress (CMS)
  * Jetpack (Search, Backup)
  * WooCommerce (eCommerce)
  * Local (Development)

Hosting

  * Flywheel

Family

  * CodePen
  * ShopTalk Show

Minisites

  * The Power of Serverless
  * Upcoming Conferences
  * Coding Fonts

Contact

  * Email
  * Sponsorship Info
  * Guest Writing

Buy

  * Posters & Swag
  * Membership

Follow

  * Twitter
  * Instagram
  * YouTube
  * CodePen
  * GitHub
  * iTunes
  * RSS

Back to Top
[Jetpack-Search-on-CSS-Tricks-Instant-Search]