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
This article mainly introduces the implementation...
Table of contents 1. Help Command 2. Mirror comma...
Table of contents Method 1 1. Configuration and i...
The first cutter in China github.com/chokcoco Fir...
need Recently, we need to migrate Node online ser...
Disadvantages of Tables 1. Table takes up more byt...
Table of contents 1. Docker Image 2. Create an in...
Introduction to Text Shadows In CSS , use the tex...
Copy code The code is as follows: <html> &l...
Table of contents Common key aliases Key without ...
Table of contents Overview Install Gulp.js Create...
1. Components and implemented functions Keepalive...
Table of contents question Server layer and stora...
Confluence is paid, but it can be cracked for use...
<br />Hello everyone! It’s my honor to chat ...