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

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
snippets/not-selector.md
View File

@ -21,6 +21,10 @@ The `:not` psuedo selector is useful for styling a group of elements, while leav
display: flex;
}
ul {
padding-left: 0;
}
li {
list-style-type: none;
margin: 0;
@ -34,33 +38,6 @@ li:not(:last-child) {
#### 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