A useful pseudo class selector: focus within

Time：2021-2-27

Pseudo class selector focus within, which indicates that an element gets the focus, or the descendant of that element gets the focus. Focus, it or its offspring get the focus.

This means that it, or its offspring, gets the focus and can trigger it:focus-within。
Code example:

//html
<div class="container" tabindex="0"> 
 <label for="text">Enter text</label> 
 <input id="text" type="text" /> 
</div>
//css
.container:focus-within { 
 background-color: #aaa; 
}

Here is the demo Animation:
A useful pseudo class selector: focus within
When the input element is selected, the style changes
A useful pseudo class selector: focus within

It or its offspring gain focus, which makes the perceptual focus area larger, so the most common use is to use:focus-withinSensing user operation focus area, highlight reminder.

A useful pseudo class selector: focus within

Tags: , , , ,

Recommended Today

Redis design and implementation 4: Dictionary Dict

In redis, the dictionary is the infrastructure. Redis database data, expiration time and hash type all take the dictionary as the underlying structure. Structure of dictionary Hashtable The implementation code of hash table is as follows:dict.h/dictht The dictionary of redis is implemented in the form of hash table. typedef struct dictht { //Hash table array, […]