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

Update and rename css-not-selector-shortcut.md to not-selector.md

Browse Source
This commit is contained in:
atomiks
2018-03-10 14:32:19 +10:00
committed by GitHub
parent d768b6c064
commit e6e732e42e
2 changed files with 75 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,95 +0,0 @@
### 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
```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
<div class="snippet-demo">
<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>
<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
.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
<span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-sel3
<!-- tags: visual -->

75
snippets/not-selector.md Normal file
View File

@ -0,0 +1,75 @@
### :not selector
The `:not` psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.
#### HTML
```html
<ul class="css-not-selector-shortcut">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
```
#### CSS
```css
.css-not-selector-shortcut {
display: flex;
}
li {
list-style-type: none;
margin: 0;
padding: 0 0.75rem;
}
li:not(:last-child) {
border-right: 2px solid #d2d5e4;
}
```
#### Demo
<div class="snippet-demo">
<ul class="snippet-demo__css-not-selector-shortcut">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
<style>
.snippet-demo__css-not-selector-shortcut {
display: flex;
padding: 0;
}
.snippet-demo__css-not-selector-shortcut li {
list-style-type: none;
margin: 0;
padding: 0 0.75rem;
}
.snippet-demo__css-not-selector-shortcut li:not(:last-child) {
border-right: 2px solid #d2d5e4
}
</style>
#### Explanation
`li:not(:last-child)` specifies that the styles should apply to all `li` elements except
the `:last-child`.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-sel3
<!-- tags: visual -->