:focus-within 是一個(gè)CSS 偽類，用於在元素自身或其任意子元素獲得焦點(diǎn)時(shí)對(duì)父元素應(yīng)用樣式。 1. 它常用於表單中高亮整個(gè)表單區(qū)域，提升用戶交互體驗(yàn)；2. 可用於構(gòu)建無障礙的下拉菜單，在父級(jí)獲得焦點(diǎn)時(shí)顯示子菜單；3. 能根據(jù)子元素的焦點(diǎn)狀態(tài)來樣式化父元素或兄弟元素，例如展示幫助信息。此特性無需JavaScript 即可實(shí)現(xiàn)動(dòng)態(tài)、易訪問的界面，並被現(xiàn)代瀏覽器廣泛支持。

When you're working with CSS and need to style an element based on the focus state of itself or any of its children, that's where :focus-within comes in handy. It's a pseudo-class that applies styles to a parent element if any of its descendants (including the element itself) receive focus. This is especially useful for things like form containers, dropdown menus, or accessible UI components.

Highlighting Form Sections When Active

One of the most common uses of :focus-within is enhancing form usability. For example, imagine a form with multiple input fields grouped inside a <div> . You might want to highlight the entire section when the user is interacting with any of the inputs.<pre class='brush:php;toolbar:false;'> .form-group:focus-within { background-color: #f0f8ff; border-left: 4px solid #007BFF; }</pre><p> With this, as soon as the user clicks or tabs into any input inside that <code>.form-group , the whole section gets visually emphasized. This helps users understand where they are in the form, especially in longer or more complex forms.

Building Accessible Dropdown Menus

Another practical application is in dropdown navigation. You can use :focus-within to show a submenu when a parent menu item has focus — whether from a mouse click or keyboard navigation.

 .dropdown:focus-within .submenu {
  display: block;
}

This makes the dropdown accessible to keyboard users without needing JavaScript to manage focus states. It works by detecting if either the link or any focusable element inside the .dropdown is focused, and then shows the submenu accordingly.

Styling Parent Elements Based on Child Focus

Sometimes you don't want to style just the focused element, but its container or sibling elements. For example, you might want to show a help icon or a message when a user focuses on a specific input.

Here's how you could do it:

• Use :focus-within on the container
• Target a sibling or child element using standard CSS selectors

 .input-wrapper:focus-within .help-text {
  display: inline;
  color: #555;
}

This can be a subtle but effective way to provide feedback or guidance without relying on JavaScript or cluttering the UI when it's not needed.

That's basically what :focus-within does and why it's useful. It's supported in all modern browsers and can make your interfaces more dynamic and accessible with minimal effort.