Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS :focus-within Selector

  • Last Updated : 18 Sep, 2020

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:

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
  • Internet Explorer (Not Supported).



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!