li:has(> a.active) → Selects any li that directly contains an a element with the class "active".
The parent li will turn red if it has an active link inside it.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS :has() Example</title> <style> /* Change text color of <li> if it contains an <a> with class "active" */ li:has(> a.active) { color: red; font-weight: bold; } </style> </head> <body> <h1>CSS :has() Parent Selector Example</h1> <p>The list item containing an active link will turn red.</p> <ul> <li>List Item 1</li> <li> List Item 2 <a href="#" class="active">Active Link</a> </li> <li> List Item 3 <a href="#">Normal Link</a> </li> </ul> </body> </html> 
Top comments (2)
you should enable syntax highlighting on your code snippets so they're easier to read:
will turn into
Thank you