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.


: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:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!