:focus is used to directly focus the element itself, and :focus-within is used to affect the parent container when the child element gets focus. 1. :focus is only effective for the current element and is often used for input box highlighting; 2. :focus-within is applied to containers containing interactive elements, triggering style changes when their child elements are focused, such as overall highlighting of form groups or search boxes; 3. When using it, ensure accessibility, retain clear focus indicators, and combine them with keyboard navigation tests. Together, the two improve the usability and user experience of the interface.

When you're working with interactive elements in CSS, :focus and :focus-within are two pseudo-classes that help you style elements based on user interaction — specifically, when they receive focus. These selectors come in handy when building accessible and user-friendly interfaces.

What is :focus ?

The :focus pseudo-class apply styles to an element when it receives focus, typically through keyboard navigation (like using the Tab key) or when a user clicks or taps on certain form elements like inputs or buttons.

Common use case:
You'll often see :focus used to highlight input fields when a user is typing into them. For example:

 input:focus {
  border-color: blue;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.3);
}

This helps users understand where they are on the page, especially those navigating via keyboard.

Things to keep in mind:

• Make sure not to remove the default focus outline without replacing it with something equally visible — doing so can hurt accessibility.
• :focus only affects the element itself when it's focused, not its children or parent.

What is :focus-within ?

:focus-within is similar but more powerful. It applies styles to a parent element if any of its descendants are focused. That makes it super useful for styling containers or forms when one of their internal elements (like an input) becomes active.

Example scenario:
Let's say you have a search form inside a div. When the user focuses on the input field, you want to highlight the whole container.

 .search-container:focus-within {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

This way, even though the focus is on the input, the entire .search-container gets styled.

Useful applications include:

• Highlighting form groups when an input inside them is focused.
• Opening dropdowns or menus when a child input or button is focused.
• Improving usability by giving visual feedback when nested interactive elements are active.

When to Use Which?

Knowing when to reach for :focus vs :focus-within depends on what part of your UI needs to respond to focus events.

• Use :focus when you only need to style the focused element itself.
• Use :focus-within when you want to affect the parent or surrounding elements based on a child being focused.

Both are great tools for making your site more responsive and accessible. Just remember:

• Test with real keyboard navigation.
• Don't forget about screen readers and other assistive tools.
• Keep visual focus indicators clear and consistent.

Basically that's it.

The above is the detailed content of What are the :focus and :focus-within pseudo-classes?. For more information, please follow other related articles on the PHP Chinese website!