8 CSS pseudo classes most likely you are not familiar with
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">
- The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser
See this in action here https://codepen.io/prathamkumar/pen/BapYOaz">https://codepen.io/prathamku...
- The :empty CSS pseudo-class represents any element that has no children.
- The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.
For example, picture-in-picture mode of videos
- The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true
- The :playing CSS pseudo-class selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.
Similarly, the :paused CSS pseudo-class selector is a resource state pseudo-class that will match an audio or video when that element is “paused”.
P.S. playing and paused are currenly is experiment. They are not standardized yet
- The :right CSS pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.
Read on Twitter
:autofill- The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browserSee this in action here https://codepen.io/prathamku..." title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1"> :autofill- The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browserSee this in action here https://codepen.io/prathamku..." class="img-responsive" style="max-width:100%;"/>
:empty- The :empty CSS pseudo-class represents any element that has no children." title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> :empty- The :empty CSS pseudo-class represents any element that has no children." class="img-responsive" style="max-width:100%;"/>
:picture-in-picture- The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.For example, picture-in-picture mode of videos" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> :picture-in-picture- The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.For example, picture-in-picture mode of videos" class="img-responsive" style="max-width:100%;"/>
:indeterminate- The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> :indeterminate- The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true" class="img-responsive" style="max-width:100%;"/>
:right- The :right CSS pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.https://abs.twimg.com/emoji/v2/... draggable="false" alt="8️⃣" title="Tastenkappe Ziffer 8" aria-label="Emoji: Tastenkappe Ziffer 8"> Similarly, :left pseudo-class for left-hand pages" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="7️⃣" title="Tastenkappe Ziffer 7" aria-label="Emoji: Tastenkappe Ziffer 7"> :right- The :right CSS pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.https://abs.twimg.com/emoji/v2/... draggable="false" alt="8️⃣" title="Tastenkappe Ziffer 8" aria-label="Emoji: Tastenkappe Ziffer 8"> Similarly, :left pseudo-class for left-hand pages" class="img-responsive" style="max-width:100%;"/>