This article introduces a slightly less practical trick to implement the parent selector using tabIndex in conjunction with focal-Within.

Is there a parent selector in the CSS?

This is a very classic problem. Until now, CSS has no really widely implemented parent selector, due to the browser’s rendering mechanism.

If you’re wondering if CSS has a parent selector, check out Zhihu: Can CSS have a parent?

Of course, this doesn’t mean that CSS can’t control parent elements with child elements. The focus-within pseudo-class can be used to achieve similar goals.

:focus-withinpseudo-classes

First, a refresher :focus-within, which is a pseudo-class.

It indicates that an element gets focus, or that its descendants get focus. Focus, and it or its descendants gain focus.

The Magic Selector: Focus-within

Using it, we can implement something like this, which fires the pseudo-element through the focus event of the element’s child, thus implementing a narrow parent selector like this:

CodePen — CSS focus-within INPUT

:focus-withinA defect in the parent selection of the pseudo-class implementation

The biggest problem with implementing a parent selector with: focal-within is that an element must have a focus event in order to trigger its: focal-within or its parent element’s: focal-within.

As a result, I previously thought that focus-within could only be used with

Interactive elements such as

For this reason, its usage scenarios are greatly limited. With this in mind, we introduce another protagonist of this article, TabIndex.

usetabindexGet the elementfocusThe event

Tabindex: An attribute of an HTML tag indicating whether its element can be focused and if/where it participates in sequential keyboard navigation (usually using the Tab key, hence the name).

That is, a simple div tag does not have a focus event. However, if we add a tabIndex attribute to it, it will behave like the input box. The number of scenarios that can be used increases dramatically.

Take a look at the pseudocode:

<div class="g-father">
    <! -- no focus event. G-children element -->
    <div class="g-children">Click</div>
</div>
Copy the code
<div class="g-father">
    <! --.g-children element with focus event -->
    <div class="g-children" tabindex="1">Click</div>
</div>
Copy the code

Tabindex =”-1″; a negative value of tabIndex indicates that the element is focusable, but cannot be queried by keyboard navigation. Because we only need the element to be able to get the focus event, we don’t need it to actually be accessible by keyboard navigation.

This way, with focus-within, you can change the style of the parent element when clicking on the child element.

In addition, we can put tabIndexes on any element, which is free from , , 

.g-father:focus-within {
    background: #fc0;
}
Copy the code

CodePen — tabIndex implements the parent selector for div in conjunction with focal-Within

One small detail, button’s focus event bubbles on Safari and Firefox

Since the input element (or any element + tabIndex) matches: focus-Within’s scheme depends on the bubble of the focus event.

For the

  1. In MacOS Safari and Firefox, ** click<button>Element, does not fire<button>There is no focus event bubble.
  2. In Windows Safari and Firefox, clicking on the

What does that mean? Let’s verify this by using a structure like this:

<div class="g-father">
    <input type="button" value="Button">
</div>
Copy the code
input:focus {
    background: #00bcd4;
}

body:focus-within {
    background: blue;
}

.g-father:focus-within {
    background: red;
}
Copy the code

Take a look at how it looks under Chrome:

Safari on Windows, Firefox:

MacOS Safari, Firefox performance:

On Chrome, the button’s focus within event is triggered. On Windows, Safari and Firefox, the button’s focus within event is triggered, but the button’s parent element is not triggered. It does not continue to bubble up after being caught by the target element. On the Mac, it won’t even trigger the Focus.

This point, when using must need to pay attention to.

CodePen — Button Focus Event Bubbling Validation (Chrome/Safari/Firefox)

The last

Of course, the trick described in this article can only be considered a very rudimentary parent selector under certain conditions (click on the target element to change the style of the parent element), the true meaning of the parent selector still needs to wait for the implementation of the future specification.

Well, the end of this article, I hope to help you 🙂

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.