diff --git a/README.md b/README.md index d406d4b..ae622d7 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_889 TILs and counting..._ +_890 TILs and counting..._ --- @@ -99,6 +99,7 @@ _889 TILs and counting..._ - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md) - [Change The Orientation Of An Image](css/change-the-orientation-of-an-image.md) - [Circular Icons With A Massive Border Radius](css/circular-icons-with-a-massive-border-radius.md) +- [Clean Up Repetition With :is() Pseudo-Class](css/clean-up-repetition-with-is-pseudo-class.md) - [Conditional Styling For Unsupported CSS Features](css/conditional-styling-for-unsupported-css-features.md) - [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md) - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md) diff --git a/css/clean-up-repetition-with-is-pseudo-class.md b/css/clean-up-repetition-with-is-pseudo-class.md new file mode 100644 index 0000000..2879d55 --- /dev/null +++ b/css/clean-up-repetition-with-is-pseudo-class.md @@ -0,0 +1,26 @@ +# Clean Up Repetition With :is() Pseudo-Class + +You can use the [`:is()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) +pseudo-class to match on a number of different selectors in a concise way. For +instance, here is how you can make some CSS shorter and more readable: + +```css +/* before */ +h1.text--bold, h2.text--bold, h3.text--bold, h4.text--bold, h5.text--bold { + font-weight: 500; +} + +/* after */ +:is(h1, h2, h3, h4, h5).text--bold { + font-weight: 500; +} +``` + +Here is how [CSS-tricks](https://css-tricks.com/almanac/selectors/i/is/) +describes it: + +> :is() is the current name for the "Matches-Any" pseudo-class in the CSS4 +working draft. The goal of the "Matches Any" selector (with all of it's names) +is to make complex groupings of selectors easier to write. + +It still has limited browser support, so use it sparingly.