Adam Daniels

Adam Daniels

1584002938

Using the ":focus-within" CSS pseudo-class — CSS Tutorial

In today’s video I’ll be showing you how to use the “:focus-within” CSS pseudo-class.

By using this pseudo-class you’re able to select an element which has focus or when one of its descendants has focus. This makes it useful when styling HTML forms or input fields.

#css #webdev

What is GEEK

Buddha Community

Using the ":focus-within" CSS pseudo-class — CSS Tutorial
Adam Daniels

Adam Daniels

1584002938

Using the ":focus-within" CSS pseudo-class — CSS Tutorial

In today’s video I’ll be showing you how to use the “:focus-within” CSS pseudo-class.

By using this pseudo-class you’re able to select an element which has focus or when one of its descendants has focus. This makes it useful when styling HTML forms or input fields.

#css #webdev

Noah  Rowe

Noah Rowe

1599113940

The CSS :focus-within Pseudo-Class

Introduction

Selecting a parent element has long been impossible to do using just CSS, but a pseudo-class,  :focus-within, changes that story somewhat. It allows to style an element when it has focus, but also when any of its inner elements (descendants) have focus. A prime example is with a form where you’d want a container element to be styled a certain way when the user focuses into one of the input elements.

HTML and CSS Code

Here’s an example of using  :focus-within with a form. Let’s start with this markup:

<form tabindex="0" class="myForm">
  <h3>What's your favorite color?</h3>
  <input type="text">
</form>

Copy

And our CSS rules are the following:

.myForm:focus-within {
  background: #f8f8f8
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 0.5) 70px
    );
}
.myForm:focus-within::before {
  content: "I'm a happy selected form!";
  color: rgb(239, 187, 53);
}

#css