Skip to content

Commit c158906

Browse files
Change order
1 parent 28d8cf2 commit c158906

File tree

1 file changed

+29
-29
lines changed

1 file changed

+29
-29
lines changed

README.md

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ A collection of tips to help take your CSS skills pro.
3535
1. [Equal-Width Table Cells](#equal-width-table-cells)
3636
1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)
3737
1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)
38+
1. [Control Specificity Better With `:is()`](#control-specificity-better-with-is)
3839
1. [Style "Default" Links](#style-default-links)
3940
1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes)
4041
1. [Style Broken Images](#style-broken-images)
@@ -45,7 +46,6 @@ A collection of tips to help take your CSS skills pro.
4546
1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
4647
1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
4748
1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
48-
1. [Control Specificity Better With `:is()`](#control-specificity-better-with-is)
4949

5050

5151
### Use a CSS Reset
@@ -425,6 +425,34 @@ That's pretty convenient.
425425
<sup>[back to table of contents](#table-of-contents)</sup>
426426

427427

428+
### Control Specificity Better with `:is()`
429+
430+
The `:is()` pseudo-class is used to target multiple selectors at onece, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form.
431+
432+
```css
433+
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
434+
color: green;
435+
}
436+
```
437+
438+
The above ruleset is equivalent to the following number selector rules...
439+
440+
```css
441+
section h1, section h2, section h3, section h4, section h5, section h6,
442+
article h1, article h2, article h3, article h4, article h5, article h6,
443+
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
444+
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
445+
color: green;
446+
}
447+
```
448+
449+
#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)
450+
451+
**Note:** The `:is()` pseudo-class isn't supported in IE11.
452+
453+
<sup>[back to table of contents](#table-of-contents)</sup>
454+
455+
428456
### Style "Default" Links
429457

430458
Add a style for "default" links:
@@ -638,34 +666,6 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei
638666
<sup>[back to table of contents](#table-of-contents)</sup>
639667

640668

641-
### Control Specificity Better with `:is()`
642-
643-
The `:is()` pseudo-class is used to target multiple selectors at onece, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form.
644-
645-
```css
646-
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
647-
color: green;
648-
}
649-
```
650-
651-
The above ruleset is equivalent to the following number selector rules...
652-
653-
```css
654-
section h1, section h2, section h3, section h4, section h5, section h6,
655-
article h1, article h2, article h3, article h4, article h5, article h6,
656-
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
657-
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
658-
color: green;
659-
}
660-
```
661-
662-
#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx)
663-
664-
**Note:** The `:is()` pseudo-class isn't supported in IE11.
665-
666-
<sup>[back to table of contents](#table-of-contents)</sup>
667-
668-
669669
## Support
670670

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

0 commit comments

Comments
 (0)