Implementation of CSS child element selection parent element

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!

<<:  Use JS to operate files (FileReader reads --node's fs)

>>:  HTML head tag detailed introduction

Recommend

Implementation of vertical centering with unknown height in CSS

This article mainly introduces the implementation...

Detailed explanation of Docker common commands Study03

Table of contents 1. Help Command 2. Mirror comma...

Detailed explanation of Vue px to rem configuration

Table of contents Method 1 1. Configuration and i...

Incredible CSS navigation bar underline following effect

The first cutter in China github.com/chokcoco Fir...

Advantages and disadvantages of Table layout and why it is not recommended

Disadvantages of Tables 1. Table takes up more byt...

How to create Apache image using Dockerfile

Table of contents 1. Docker Image 2. Create an in...

Using text shadow and element shadow effects in CSS

Introduction to Text Shadows In CSS , use the tex...

HTML head tag meta to achieve refresh redirection

Copy code The code is as follows: <html> &l...

Detailed explanation of Vue's keyboard events

Table of contents Common key aliases Key without ...

Let's talk about the LIMIT statement in MySQL in detail

Table of contents question Server layer and stora...

Complete steps for deploying confluence with docker

Confluence is paid, but it can be cracked for use...

How to Apply for Web Design Jobs

<br />Hello everyone! It’s my honor to chat ...