andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add demo information and explanation

Browse Source
This commit is contained in:
Juwan Petty
2018-03-08 22:20:15 -05:00
parent 58ba9b127b
commit d768b6c064
1 changed files with 63 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
snippets/css-not-selector-shortcut.md
View File

@ -1,46 +1,95 @@
### CSS :not selector shortcut
Lots of code just to space each item evenly, except for the last one is just one great example for the `:not` psuedo selector.
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
```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
```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
<!-- You must create a `snippet-demo` parent block and use it as a namespace with BEM syntax. -->
<div class="snippet-demo">
<some-element class="snippet-demo__snippet-name"></some-element>
<ul class="snippet-demo__css-not-selector-shortcut">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<!-- Add your style rules here. -->
<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
<!-- Use a step-by-step (ordered) list if possible. Keep it concise. -->
1. Instead of putting on the border and then taking it off:
```css
.css-not-selector-shortcut li {
border-right: 1px solid #666666;
}
.css-not-selector-shortcut li:last-child {
border-right: none;
}
```
2. Use the `:not` psuedo selector to save a few lines:
```css
.css-not-selector-shortcut li:not(:last-child) {
border-right: 1px solid #666666;
}
```
#### Browser support
<!-- Use the checkmark or the warning emoji, see the existing snippets. -->
<span class="snippet__support-note">✅ No caveats.</span>
<!-- Whenever possible, link a `caniuse` feature which allows the browser support percentage to be displayed.
If no link is provided, it defaults to 99+%. -->
* https://caniuse.com/#feat=css-sel3
<!-- tags: layout -->
<!-- tags: visual -->