Hiding empty elements on your website with CSS (or JS) - DIY Coding

Опубликовано: 15 Январь 2025
на канале: Ed Codes - Shopify DIY Tutorials

2,149

Grab the code - https://ed.codes/blog/hiding-empty-el...

Whether you are using Shopify, Wordpress, Webflow, or others, there are cases where you have an empty part of a page, and the platform doesn’t give you enough control to hide it without creating a separate template.

So how can we hide things with, based on if a div is empty? And without editing the existing website structure or changing back-end logic.

In other words, I want a short piece of code that I can add to the site - externally from the theme - that hides those divs.

There are some relatively new features of CSS called pseudo-classes that are very powerful and allow us to target empty elements, or elements that have (or don’t have) certain children.

Let’s explore :empty, :has, and :not.

📢 STAY UPDATED

Subscribe to my newsletter: https://ed.codes/newsletter
Youtube won’t always show you my latest videos, subscribe to be notified and see other content that I don't post on Youtube.

🙏 SUPPORT THE CHANNEL ON PATREON

Request and vote on videos, get discounts, and be listed as a community member.
/ edcodes

📚 MY SHOPIFY CODING EBOOK

https://ed.codes/shopify-coding-handbook
Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify.

👨🏼‍💻 WHO AM I?

Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
I'm a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.

Visit my website: https://ed.codes

Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:
https://ed.codes/community

🛠 CODE SHOP

https://ed.codes/shop
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.

👍 MY FAVOURITE APPS & THEMES

https://ed.codes/tools

⏭ CHAPTERS

00:00 Intro
02:32 Codepen & how to use the code
04:05 CSS empty
05:51 CSS has
07:09 CSS not
08:30 More difficult scenarios
09:43 How the javascript will work
11:35 Finding your container element
12:56 More javascript explanation

#CSS #frontend #codingtutorial