{"id":269,"date":"2024-09-18T14:32:38","date_gmt":"2024-09-18T14:32:38","guid":{"rendered":"https:\/\/codebox.keyframetechsolution.com\/?p=269"},"modified":"2025-02-22T19:15:48","modified_gmt":"2025-02-22T19:15:48","slug":"create-has-selector-css-animation","status":"publish","type":"post","link":"https:\/\/codebox.keyframetechsolution.com\/create-has-selector-css-animation\/","title":{"rendered":"Create :has() Selector Animation using HTML CSS and JavaScript"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p><span data-preserver-spaces=\"true\">In programming, :<\/span><span data-preserver-spaces=\"true\">has<\/span><span data-preserver-spaces=\"true\">() selector <\/span><span data-preserver-spaces=\"true\">allows us <\/span><span data-preserver-spaces=\"true\">to apply styles or trigger animations based on the presence of certain elements within a container.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Traditionally, CSS alone didn&#8217;t provide a way to target elements based on their child elements. <\/span><\/p>\n<p><span data-preserver-spaces=\"true\">However, with the introduction <\/span><span data-preserver-spaces=\"true\">of it<\/span><span data-preserver-spaces=\"true\">, CSS has gained the ability to style an element if it contains certain child elements, like a specific class or type of content.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">In this tutorial, I will explain <\/span><span data-preserver-spaces=\"true\">how to <\/span><span data-preserver-spaces=\"true\">create <\/span><span data-preserver-spaces=\"true\">:<\/span><span data-preserver-spaces=\"true\">has<\/span><span data-preserver-spaces=\"true\">() Selector Animation using HTML, CSS, and JavaScript. <\/span><\/p>\n<p>\u2705\u00a0<strong>Watch Live Preview<\/strong>\u00a0\ud83d\udc49\ud83d\udc49<\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/oPSnRHYtXVo?si=PeVevanGpzgsVbb2\" width=\"100%\" height=\"450\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><a href=\"#conclusion\">Click Here to Download the Code<\/a><\/p>\n<div class=\"border-blog-highlight\">\n<h2>Table of Contents<\/h2>\n<ul>\n<li><a href=\"#section1\">What is :has() Selector<\/a><\/li>\n<li><a href=\"#section2\">Set Up Project<\/a><\/li>\n<li><a href=\"#section3\">HTML Code Structure<\/a><\/li>\n<li><a href=\"#section4\">CSS Code Structure<\/a><\/li>\n<li><a href=\"#section5\">JavaScript Code Structure<\/a><\/li>\n<li><a href=\"#section6\">Putting It All Together<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<\/div>\n<h3 id=\"section1\">What is :has() Selector?<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:has\" rel=\"nofollow noopener\" target=\"_blank\">:has()<\/a> selector in CSS allows us to apply styles to an element based on its child elements.<\/p>\n<p>It&#8217;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.<\/p>\n<p><strong>You may also like:<\/strong><\/p>\n<p><a href=\"https:\/\/codebox.keyframetechsolution.com\/slick-slider\/\">How to Make a Responsive Slick Slider Using HTML CSS and JavaScript<\/a><\/p>\n<p><a href=\"https:\/\/codebox.keyframetechsolution.com\/animated-landing-page\/\">How to Create Animated Landing Page using HTML CSS and JavaScript<\/a><\/p>\n<p><a href=\"https:\/\/codebox.keyframetechsolution.com\/scrolltrigger-canvas-animations\/\">How to Build Dynamic Canvas Animations with GSAP ScrollTrigger<\/a><\/p>\n<p><a href=\"https:\/\/codebox.keyframetechsolution.com\/one-page-website-design\/\">How to Build One Page Website Design using Bootstrap 5<\/a><\/p>\n<h3 id=\"section2\"><strong><span data-preserver-spaces=\"true\">Set Up Project<\/span><\/strong><\/h3>\n<p>Create a folder on your computer and add the following files inside it:<\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">index.html<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">styles.css<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">scripts.js<\/span><\/li>\n<\/ul>\n<h2><strong><span data-preserver-spaces=\"true\">Source Code<\/span><\/strong><\/h2>\n<h3 id=\"section3\"><span data-preserver-spaces=\"true\">HTML Code Structure<\/span><\/h3>\n<p><span data-preserver-spaces=\"true\">We&#8217;ll begin by creating a simple HTML structure to work with, adding multiple images, <\/span><span data-preserver-spaces=\"true\">and<\/span><span data-preserver-spaces=\"true\"> animating the container whenever a specific item is clicked or hovered <\/span><span data-preserver-spaces=\"true\">over.<\/span><\/p>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">index.html<\/div>\n<\/p><\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n  &lt;title&gt;Create :has() Selector Animation using HTML CSS and JavaScript&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;\r\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/typed.js\/2.0.11\/typed.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/waypoints\/4.0.1\/jquery.waypoints.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/css\/bootstrap.min.css\"&gt;&lt;\/script&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&amp;family=Ubuntu:wght@400;500;700&amp;display=swap\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- CODE --&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/div>\n<h3 id=\"section4\"><span data-preserver-spaces=\"true\">CSS Code Structure<\/span><\/h3>\n<p><span data-preserver-spaces=\"true\">Next, we&#8217;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).<\/span><\/p>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">style.css<\/div>\n<\/p><\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt; \/* Your CSS code here *\/ &gt;\r\n&lt; * { &gt;\r\n\r\n&lt; margin: 0; &gt;\r\n&lt; padding: 0 &gt;\r\n&lt; box-sizing: border-box; &gt;\r\n&lt;     text-decoration: none; &gt;\r\n&lt;     } &gt;\r\n      <\/code><\/pre>\n<\/p><\/div>\n<\/div>\n<h3 id=\"section5\"><span data-preserver-spaces=\"true\">JavaScript Code Structure<\/span><\/h3>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">script.js<\/div>\n<\/p><\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt; \/\/ JavaScript Code &gt;\r\n      <\/code><\/pre>\n<\/p><\/div>\n<\/div>\n<h2 id=\"section6\"><span data-preserver-spaces=\"true\">Putting It All Together<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Now that we&#8217;ve set everything up, you can run the code in a browser. <\/span><\/p>\n<p><span data-preserver-spaces=\"true\">When you click on a box, it will receive the &#8216;clicked&#8217; class, and the container will scale up.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">You can also add more interactive elements to extend this further.<\/span><\/p>\n<p><strong>Here\u2019s a summary of how everything works together:<\/strong><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">HTML structure defines the layout of containers and boxes.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">CSS provides styling and animations <\/span><span data-preserver-spaces=\"true\">and <\/span><span data-preserver-spaces=\"true\">:<\/span><span data-preserver-spaces=\"true\">has<\/span><span data-preserver-spaces=\"true\">() selector checks for the presence of the .clicked class and applies the scale animation to the container when a box is clicked.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">JavaScript adds interactivity by toggling the clicked class when a box is clicked.<\/span><\/li>\n<\/ul>\n<h2 id=\"conclusion\"><span data-preserver-spaces=\"true\">Conclusion<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Using <\/span><span data-preserver-spaces=\"true\">:<\/span><span data-preserver-spaces=\"true\">has<\/span><span data-preserver-spaces=\"true\">() selector in combination with HTML, CSS, and JavaScript is a powerful way to create dynamic, interactive animations. <\/span><\/p>\n<p><span data-preserver-spaces=\"true\">In this example, I have used it to trigger an animation on the parent container when a child element (a box) is clicked. <\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This is just the beginning\u2014 you can customize this approach to create even more complex and engaging animations on your website.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">As browser support for <\/span><span data-preserver-spaces=\"true\">:<\/span><span data-preserver-spaces=\"true\">has<\/span><span data-preserver-spaces=\"true\">() selector continues to grow, <\/span><span data-preserver-spaces=\"true\">you\u2019ll be able to<\/span><span data-preserver-spaces=\"true\"> take advantage of this feature in more advanced web projects, reducing the reliance on JavaScript for certain types of interactivity and enhancing performance.<\/span><\/p>\n<p><strong><i class=\"fa fa-download\" style=\"color: #046bd2;\"><\/i>15 people bought this<\/strong><\/p>\n<p><strong>Grab it Now for Just <i class=\"fa fa-rupee\" style=\"color: #046bd2;\"><\/i><span style=\"color: #046bd2;\">20<\/span><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In programming, :has() selector allows us to apply styles or trigger animations based on the presence of certain elements [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[4],"tags":[446,449,448,447],"class_list":["post-269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hover-effects","tag-has-selector-css","tag-has-selector-example","tag-has-selector-html","tag-has-selector-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":11,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"predecessor-version":[{"id":1624,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/269\/revisions\/1624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media\/271"}],"wp:attachment":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}