Implementation of CSS child element selection parent element

Usually a CSS selector selects from top to bottom, selecting child elements through parent elements. So, is it possible to select parent elements through child elements?

<ul>
    <li>
        <a href="#" class="active">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
</ul>

If I want to select the li that contains a.active, how can I achieve it? The CSS we have learned so far seems to have no solution, but today we will introduce a CSS pseudo-class: has() which has this function. Although it is still in the draft stage, you can still learn about it in advance.

li:has(> a.active){
    color:red;
}

In addition to indicating inclusion, :has can also indicate a sibling-following relationship.

div:has(+ p){
    color:red;
}

Indicates the selection of the <div> tag, provided that the div tag must be followed by a <p>. Can also be used with :not

article:not(:has(a)){
    color:red;
}

Represents an <article> tag that does not contain an <a>. Note the order of :not and :has here. Different orders represent different meanings.

article:has(:not(a)){
    color:red;
}

Indicates that it contains non-<a> <article> tags

In fact, the :focus-within we talked about earlier is also a pseudo-class that selects the parent element through the child element, but the condition can only be whether the child element gets the focus, while :has is more flexible and powerful.

form:focus-within{
    background-color:black;
}

If implemented through :has, it can be written like this

form:has(:focus){
    background-color:black;
}

This is the end of this article about the implementation of CSS child element selection of parent elements. For more relevant CSS child element selection of parent elements, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!