From 149c2cba902feeb84ce288be6654f901a367c329 Mon Sep 17 00:00:00 2001 From: Juwan Petty Date: Thu, 8 Mar 2018 12:52:44 -0500 Subject: [PATCH 1/4] Create css-not-selector.md with base information --- snippets/css-not-selector.md | 46 ++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 snippets/css-not-selector.md diff --git a/snippets/css-not-selector.md b/snippets/css-not-selector.md new file mode 100644 index 000000000..c89528898 --- /dev/null +++ b/snippets/css-not-selector.md @@ -0,0 +1,46 @@ +### CSS :not selector + +Lots of code just to space each item evenly, except for the last one. One great use for the `:not` psuedo selector. + +#### HTML + +```html + +``` + +#### CSS + +```css + +``` + +#### Demo + + + +
+ +
+ + + + + +#### Explanation + + + +#### Browser support + + + +✅ No caveats. + + + +* https://caniuse.com/#feat=css-sel3 + + From 58ba9b127bd73ce9fe1604a157a0b1d7f1dce6ca Mon Sep 17 00:00:00 2001 From: Juwan Petty Date: Thu, 8 Mar 2018 20:59:09 -0500 Subject: [PATCH 2/4] Rename snippet to css :not selector shortcut --- .../{css-not-selector.md => css-not-selector-shortcut.md} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename snippets/{css-not-selector.md => css-not-selector-shortcut.md} (90%) diff --git a/snippets/css-not-selector.md b/snippets/css-not-selector-shortcut.md similarity index 90% rename from snippets/css-not-selector.md rename to snippets/css-not-selector-shortcut.md index c89528898..66782be75 100644 --- a/snippets/css-not-selector.md +++ b/snippets/css-not-selector-shortcut.md @@ -1,6 +1,6 @@ -### CSS :not selector +### CSS :not selector shortcut -Lots of code just to space each item evenly, except for the last one. One great use for the `:not` psuedo selector. +Lots of code just to space each item evenly, except for the last one is just one great example for the `:not` psuedo selector. #### HTML From d768b6c0646b420cb16b97105edb766b96e620e0 Mon Sep 17 00:00:00 2001 From: Juwan Petty Date: Thu, 8 Mar 2018 22:20:15 -0500 Subject: [PATCH 3/4] Add demo information and explanation --- snippets/css-not-selector-shortcut.md | 77 ++++++++++++++++++++++----- 1 file changed, 63 insertions(+), 14 deletions(-) diff --git a/snippets/css-not-selector-shortcut.md b/snippets/css-not-selector-shortcut.md index 66782be75..883edab2a 100644 --- a/snippets/css-not-selector-shortcut.md +++ b/snippets/css-not-selector-shortcut.md @@ -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 - + ``` #### 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 - -
- +
- - #### 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 - - ✅ No caveats. - - * https://caniuse.com/#feat=css-sel3 - + From e6e732e42ebe61846716a7bbeee7f4d7732c0867 Mon Sep 17 00:00:00 2001 From: atomiks Date: Sat, 10 Mar 2018 14:32:19 +1000 Subject: [PATCH 4/4] Update and rename css-not-selector-shortcut.md to not-selector.md --- snippets/css-not-selector-shortcut.md | 95 --------------------------- snippets/not-selector.md | 75 +++++++++++++++++++++ 2 files changed, 75 insertions(+), 95 deletions(-) delete mode 100644 snippets/css-not-selector-shortcut.md create mode 100644 snippets/not-selector.md diff --git a/snippets/css-not-selector-shortcut.md b/snippets/css-not-selector-shortcut.md deleted file mode 100644 index 883edab2a..000000000 --- a/snippets/css-not-selector-shortcut.md +++ /dev/null @@ -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 - -``` - -#### 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 - -
- -
- - - -#### 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 - -✅ No caveats. - -* https://caniuse.com/#feat=css-sel3 - - diff --git a/snippets/not-selector.md b/snippets/not-selector.md new file mode 100644 index 000000000..067df1b49 --- /dev/null +++ b/snippets/not-selector.md @@ -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 +
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
  • Four
    • +
  • Five
    • +
+``` + +#### 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 + +
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
  • Four
    • +
  • Five
    • +
+
+ + + +#### Explanation + +`li:not(:last-child)` specifies that the styles should apply to all `li` elements except +the `:last-child`. + +#### Browser support + +✅ No caveats. + +* https://caniuse.com/#feat=css-sel3 + +