DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for You want enabling CSS selectors, not disabling ones
Silvestar Bistrović
Silvestar Bistrović

Posted on • Originally published at silvestar.codes

You want enabling CSS selectors, not disabling ones

An enabling selector is what I call a selector that does a job without disabling the particular rule. I'll explain using the following example.

Let's say we have list items and we want to add the margin to the last one.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
<ul>
Enter fullscreen mode Exit fullscreen mode

Here's the usual, disabling way.

li {
  margin-bottom: 1em;
}

li:last-child {
  margin-bottom: 0;
}
Enter fullscreen mode Exit fullscreen mode

First, we add margin-bottom to all elements. Then, we disable the bottom margin on the last element. I call this technique disabling selector since the li:last-child selector disables the previous selector's rule.

But we could do better using enabling selectors.

li:not(:last-child) {
  margin-bottom: 1em;
}
Enter fullscreen mode Exit fullscreen mode

The selector li:not(:last-child) is enabling margin-bottom on all elements except the last one. There's no need to disable anything. That is much readable and maintainable if you ask me.

Here's another version of the enabling selector for the same example.

li + li {
  margin-top: 1em;
}
Enter fullscreen mode Exit fullscreen mode

In this version, we add margin-top to all elements that have a previous sibling, which means to all elements except the first one, which doesn't have a previous sibling.

There you have it, enabling selectors that do a better job in less code. Here's the demo:

Top comments (0)

12 Gorgeous UI Components for Your Design Inspiration

>> Check out this classic DEV post <<