Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

CSS :focus-within Selector

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


:focus {
    /* CSS Properties */

Example: Below is the example which illustrates the use of :focus-within pseudo-class Selector.


<!DOCTYPE html>
<html lang="en">
        form {
            border: 2px solid red;
            padding: 15px;
            width: 30%;
        form:focus-within {
            background: #ff8;
            color: black;
        input {
            margin: 5px;
    <h1 style="color: green;">
        <label>Geek 1</label>
        <input type="text">
        <label>Geek 2</label>
        <input type="text">


Supported Browsers:

  • Google Chrome 60+
  • Edge 79+
  • Firefox 52+
  • Opera 47+
  • Safari 10.1+
My Personal Notes arrow_drop_up
Last Updated : 30 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials