Modern CSS selectors – :is() Pseudo-Class Selector

:is() Pseudo-Class Selector

Nếu bạn muốn select nhiều element cùng lúc, bạn có thể sử dụng cách sau:

<h1>
  title
</h1>
<p>
  text
</p>
<span>
  tex span
</span>

h1, p, span {
  color: red;
}

Tuy nhiên, để ngắn gọn hơn, chúng ta có thể sử dụng :is() selector như thế này

:is(h1, p, span) {
  color: green;
}

Dài dòng thêm một xíu, mình có một ví dụ như sau

<p class="text-emphasis">
  text emphasis
</p>

<h1 class="text-emphasis">
  Title text emphasis
</h1>

<h2 class="text-emphasis">
  Title text emphasis
</h2>

<p class="text-emphasis">
  text emphasis
</p>

<p>
  Normal text
</p>

Giờ mình chỉ muốn select những class .text-emphasis là h1, và h2. Mình phải làm sao nhỉ?

h1.text-emphasis,
h2.text-emphasis {
  color: red;
}

Đối với CSS, nó có vẻ hơi dài dòng nhỉ, phải lặp lại 2 dòng .text-emphasis. Cho nên, :is() selector sẽ là giải pháp tốt hơn trong trường hợp này

.text-emphasis:is(h1, h2) {
  color: red;
}

Các bạn hãy xem codepen này để tìm hiểu rõ hơn nhé

See the Pen Css selector :is by minhchau (@ngocminhxx) on CodePen.

Bạn không thể dùng :is() cho các pseudo-elements như ::before hay::after

Trình duyệt cũ như IE sẽ không hỗ sợ selector này