CSS :focus-within Selector
The :focus-within pseudo-class is a selects an element that consists of a focused element as a child. The CSS rules are applied when any child element gets focus. Example includes clicking a link, selecting an input, etc.
Syntax:
:focus {
/* CSS Properties */
}Example: Below is the example which illustrates the use of :focus-within pseudo-class Selector.
HTML
<!DOCTYPE html><html lang="en"><head> <style> form { border: 2px solid red; padding: 15px; width: 30%; } form:focus-within { background: #ff8; color: black; } input { margin: 5px; } </style></head><body> <h1 style="color: green;"> GeeksforGeeks </h1> <form> <label>Geek 1</label> <input type="text"> <br> <label>Geek 2</label> <input type="text"> </form></body></html> |
Output:
Supported Browsers:
- Google Chrome 60+
- Edge 79+
- Firefox 52+
- Opera 47+
- Safari 10.1+
Please Login to comment...