CSS :focus-within bạn đã biết chưa ?

:focus-within css

:focus-within trong css khác với :focus. :focus đại diện cho một element chẳng hạn như phần tử <input> được focus vào. Ví dụ nó sẽ được kích hoạt khi người dùng click vào một phần tử hoặc sử dụng phím Tab của bàn phím.

Trong một số trường hợp chúng ta muốn thay đổi style của class parent khi ta focus vào 1 phần tử bên trong parent thì làm thế nào? Câu trả lời là chúng ta thực hiện điều này bằng :focus-within. Sau đây mình có một ví dụ nhỏ giúp các bạn hiểu về pseudo-class này.

Ở ví dụ trên các bạn để ý khi focus vào form input border ở class parent đã được đổi màu. Điều này giúp người dùng biết mình đang ở input nào ^^.

Ta sẽ làm điều đó như sau:

Phần html:

<div class="container">
  <div class="form">
    <label for="email">Your email</label>
    <input type="email" id="email" />
  </div>
  <div class="form">
    <label for="password">Your Password</label>
    <input type="password" id="password" />
  </div>
</div>

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

Các bạn có thể thấy phần tử input đang ở trong phần tử có class .form. Khi kích hoạt focus của input thì ta sử dụng :focus-within cho .form và thay border-color.

Có thể hiểu rằng khi một phần tử bên trong parent được focus chúng ta có thể sử dụng focus-within cho các phần tử chứa nó.

Để hiểu hơn thì ví dụ trên mình đã thay padding cho container bằng cách thêm focus-within cho phần tử này. Khi input trong phần tử này focus ta đổi padding cho container ^^.

.container:focus-within {
    padding: 40px;
}

Đơn giản và hiệu quả đúng không 😀 Thay vì làm điều tương tự bằng cách sử dụng Javascript/Jquery thì ta đơn giản chỉ cần focus-within.

Như vậy là mình đã hướng dẫn các bạn chúng ta sử dụng focus-within. Hy vọng các bạn có thể hiểu và sử dụng nó cho trang web của mình khi cần ^^.

Chúc các bạn học tốt. Peace 😄