Focus vs Focus-within: The Battle for Attention on Your Web Page

Focus on the details 👀

CSS (Cascading Style Sheets) is a powerful tool that web developers use to control the layout and appearance of web pages. CSS provides a range of selectors that allow developers to target specific HTML elements and apply styling to them. Two selectors that are often used are the :focus and :focus-within selectors. While both selectors are used to target elements that have focus, they have different applications.

The :focus Selector The :focus selector is used to target an element that currently has keyboard focus. This selector is often used to provide visual feedback to users when they interact with a web page using the keyboard. When an element has focus, it is highlighted, and any CSS styles applied to the :focus selector are applied to the element.

Here is an example of how the :focus selector can be used to style an input element:

.form-group:focus-within {
  border: 2px solid #0066cc;
  background-color: #f2f2f2;
}

n this example, when any descendant element of the .form-group element has focus, the .form-group element will have a blue border and a light gray background color.

The key difference between :focus and :focus-within selectors is that the former targets only the element with focus, while the latter targets the element with focus as well as any of its descendants that have focus. This means that the :focus-within selector can be used to apply styling to multiple elements when any of their descendants have focus.

In conclusion, the :focus and :focus-within selectors are both useful for styling elements that have focus on a web page. The :focus selector targets the element with keyboard focus, while the :focus-within selector targets the element with focus as well as any of its descendants that have focus. Knowing the difference between these two selectors can help web developers apply the right styles to the right elements on a web page.