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
Table of contents 1. Scope 2. Scope Chain 3. Lexi...
console.log( [] == ![] ) // true console.log( {} ...
Nginx (engine x) is a high-performance HTTP and r...
emmm the name is just a random guess 2333 Preface...
During the development process, we often use the ...
What is a descending index? You may be familiar w...
Let's take a look at the code file structure ...
MySQL database is widely used, especially for JAV...
Table of contents 1.setInterval() 2.setTimeout() ...
Table of contents Preface Rationale Procedure 1. ...
Ubuntu 20.04 has been released, bringing many new...
This article shares the specific code for Vue to ...
Table of contents Preface MySQL master-slave repl...
Preface In the case of primary key conflict or un...
The img tag in XHTML should be written like this:...