From 56e1e89c4ca2902b99e982f48b2b41a56802a065 Mon Sep 17 00:00:00 2001
From: Yasir Khan <yasirkhanone22@gmail.com>
Date: Wed, 8 Feb 2023 01:01:18 +0500
Subject: [PATCH] Pseudo-Class tip added

---
 README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/README.md b/README.md
index 2fc4083..176ec27 100644
--- a/README.md
+++ b/README.md
@@ -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. [Use `:is` for Selecting Multiple Elements](#use-is-for-selecting-multiple-elements)
 
 
 ### Use a CSS Reset
@@ -640,6 +641,28 @@ 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>
 
 
+### Use `:is` for Selecting Mulitple Elements
+
+If you have multiple selectors, and you want to give same css, you can use this pseudo-class. The `:is()` function takes precedence over other selectors, so you can use it to override styles set by other selectors.
+
+```css
+.highlights {
+  background-color: blue;
+}
+
+:is(.highlights) {
+  background-color: yellow;
+  font-weight: bold;
+}
+```
+
+Morever you can use the `:is()` function to select multiple elements at once, by combining selectors in the parentheses. For example: `:is(h1, p)` will select all elements with either the tags `"h1"` or the `"p"`.
+
+#### [Demo](https://codepen.io/khan_zada22/pen/bGjJXZQ)
+
+<sup>[back to table of contents](#table-of-contents)</sup>
+
+
 ## Support
 
 Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.