CSS :has() Explained with Real-Time Examples

:has() Selector in CSS

The :has() selector is called the parent selector in CSS. It allows you to style an element based on its children — something that was impossible before without JavaScript.

1. Basic syntax

2. Highlight Form When Input is Focused

Highlight form when input is focus

When input is not focus

3. Style Label if Checkbox is Checked

Checbox is not Checked

Checbox is Checked

4. Dark Mode Toggle Without JavaScript