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

Javascript scope and closure details

Table of contents 1. Scope 2. Scope Chain 3. Lexi...

A little-known JS problem: [] == ![] is true, but {} == !{} is false

console.log( [] == ![] ) // true console.log( {} ...

Detailed explanation of Nginx regular expressions

Nginx (engine x) is a high-performance HTTP and r...

Implementation of CSS loading effect Pac-Man

emmm the name is just a random guess 2333 Preface...

Notes on using $refs in Vue instances

During the development process, we often use the ...

Steps to split and compress CSS with webpack and import it with link

Let's take a look at the code file structure ...

How to manually install MySQL 5.7 on CentOS 7.4

MySQL database is widely used, especially for JAV...

Summary of JavaScript Timer Types

Table of contents 1.setInterval() 2.setTimeout() ...

What to do after installing Ubuntu 20.04 (beginner's guide)

Ubuntu 20.04 has been released, bringing many new...

Vue implements adding, displaying and deleting multiple images

This article shares the specific code for Vue to ...

Detailed explanation of MySQL semi-synchronization

Table of contents Preface MySQL master-slave repl...

Three ways to avoid duplicate insertion of data in MySql

Preface In the case of primary key conflict or un...

Things to note when writing self-closing XHTML tags

The img tag in XHTML should be written like this:...