Introduction
In programming, :has() selector allows us to apply styles or trigger animations based on the presence of certain elements within a container.
Traditionally, CSS alone didn’t provide a way to target elements based on their child elements.
However, with the introduction of it, CSS has gained the ability to style an element if it contains certain child elements, like a specific class or type of content.
In this tutorial, I will explain how to create :has() Selector Animation using HTML, CSS, and JavaScript.
✅ Watch Live Preview 👉👉
Click Here to Download the Code
Table of Contents
What is :has() Selector?
:has() selector in CSS allows us to apply styles to an element based on its child elements.
It’s a powerful tool that lets you style a parent element when it contains specific child elements, enabling more dynamic and context-aware styling without relying on JavaScript.
You may also like:
How to Make a Responsive Slick Slider Using HTML CSS and JavaScript
How to Create Animated Landing Page using HTML CSS and JavaScript
How to Build Dynamic Canvas Animations with GSAP ScrollTrigger
How to Build One Page Website Design using Bootstrap 5
Set Up Project
Create a folder on your computer and add the following files inside it:
- index.html
- styles.css
- scripts.js
Source Code
HTML Code Structure
We’ll begin by creating a simple HTML structure to work with, adding multiple images, and animating the container whenever a specific item is clicked or hovered over.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create :has() Selector Animation using HTML CSS and JavaScript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap">
</head>
<body>
<!-- CODE -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS Code Structure
Next, we’ll add styles for the boxes and the container, and define an animation that triggers when the container contains a specific box (e.g., when a box is clicked).
< /* Your CSS code here */ >
< * { >
< margin: 0; >
< padding: 0 >
< box-sizing: border-box; >
< text-decoration: none; >
< } >
JavaScript Code Structure
< // JavaScript Code >
Putting It All Together
Now that we’ve set everything up, you can run the code in a browser.
When you click on a box, it will receive the ‘clicked’ class, and the container will scale up.
You can also add more interactive elements to extend this further.
Here’s a summary of how everything works together:
- HTML structure defines the layout of containers and boxes.
- CSS provides styling and animations and :has() selector checks for the presence of the .clicked class and applies the scale animation to the container when a box is clicked.
- JavaScript adds interactivity by toggling the clicked class when a box is clicked.
Conclusion
Using :has() selector in combination with HTML, CSS, and JavaScript is a powerful way to create dynamic, interactive animations.
In this example, I have used it to trigger an animation on the parent container when a child element (a box) is clicked.
This is just the beginning— you can customize this approach to create even more complex and engaging animations on your website.
As browser support for :has() selector continues to grow, you’ll be able to take advantage of this feature in more advanced web projects, reducing the reliance on JavaScript for certain types of interactivity and enhancing performance.
15 people bought this
Grab it Now for Just 20
