Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Slay Specificity with :is selector #180

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Slay Specificity with :is selector #180

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 31 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ A collection of tips to help take your CSS skills pro.
1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
1. [Slay Specificity With `:is` Selector](#slay-specificity-with-is-selector)


### Use a CSS Reset
Expand Down Expand Up @@ -627,7 +628,7 @@ br + br {

### Use `:empty` to Hide Empty HTML Elements

If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `<p class="error-message"></p>`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout.
If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `<p class="error-message"></p>`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout.

```css
:empty {
Expand All @@ -640,6 +641,35 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei
<sup>[back to table of contents](#table-of-contents)</sup>


### Slay Specificity With `:is` Selector

:is() can be used in CSS rules to target multiple elements at once, reducing redundancy and enhancing code readability.

```css
:is(h1 , h2 , h2) {
color: blue;
}
```

It can extremely useful when writing complex selectors.

```css
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}

/* ... which would be the equivalent of: */
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}
```
Learn more at [CSS Tricks](https://css-tricks.com/almanac/selectors/i/is/)

<sup>[back to table of contents](#table-of-contents)</sup>

## Support

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
Expand Down