andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
d768b6c0646b420cb16b97105edb766b96e620e0
30-seconds-of-code/snippets/css-not-selector-shortcut.md
Juwan Petty d768b6c064 Add demo information and explanation
2018-03-08 22:20:15 -05:00

1.8 KiB
Raw Blame History

CSS :not selector shortcut

The :not psuedo selector is perfect for styling a group of elements, and leaving the last (or specified) element unstyled without all the lines of code.

HTML

<ul class="css-not-selector-shortcut">
  <li class="link"><a href="">Link 1</a></li>
  <li class="link"><a href="">Link 2</a></li>
  <li class="link"><a href="">Link 3</a></li>
  <li class="link"><a href="">Link 4</a></li>
  <li class="link"><a href="">Link 5</a></li>
</ul>

CSS

li {
  display: inline-block;
  
  list-style-type: none;
  margin: 0;
  padding: .25em 1em;
}

.css-not-selector-shortcut a {
  text-decoration:none;
  color: #111111;
}

.css-not-selector-shortcut li:not(:last-child) {
  border-right: 1px solid #666666;
}

Demo

<style> li { display: inline-block; list-style-type: none; margin: 0; padding: .25em 1em; } .css-not-selector-shortcut a { text-decoration:none; color: #111111; } .css-not-selector-shortcut li:not(:last-child) { border-right: 1px solid #666666; } </style>

Explanation

  1. Instead of putting on the border and then taking it off:
.css-not-selector-shortcut li {
  border-right: 1px solid #666666;
}

.css-not-selector-shortcut li:last-child {
  border-right: none;
}
  1. Use the :not psuedo selector to save a few lines:
.css-not-selector-shortcut li:not(:last-child) {
  border-right: 1px solid #666666;
}

Browser support

✅ No caveats.