By Russ Weakley

Understanding the :empty Pseudo-Class (Screencast)

By Russ Weakley

Exploring and understanding the uses of CSS selectors could lead you down a long and confusing road. You can learn to overcome your fears and thoroughly understand different CSS selectors and their uses. Watch as I demonstrate one relatively new selector, the :empty pseudo-class.

This is one lesson from my latest course, CSS Selectors 2: Targeting HTML Like a Pro. Advanced selectors allow you to target different elements in an amazing variety of ways. By completing my course, you’ll gain a detailed knowledge of a range of different selectors including the :lang pseudo-class, attribute selectors, and structural pseudo-classes. With each selector you’ll learn the correct syntax, how it works and the browser support. Each aspect of the course includes detailed slides and hands-on exercises.

I hope to see you at Learnable.

  • DanOwen

    Thank you, Russ. A nice presentation. It’s a no-brainer for styling-only use, since by definition it has no semantic significance.

  • DDA

    Do you realize that you misspelt :empty in the intro title slide (at 0:07 in)?

    • LouisLazaris

      Obviously nobody realized that! :)

  • JoaoReynolds

    So, Sitepoint, you’re allowing your writers to advertise on your site now?

    • LouisLazaris


      Learnable is a website owned by SitePoint. So it’s not really “advertising”, as much as it is promoting one of the SitePoint-related projects. It is promotional in nature, so I suppose that could be called “advertising”, but it’s perfectly within the realm of exactly what we publish on the HTML/CSS category, so I don’t see it as overly promotional.

      • JoaoReynolds

        Thanks for the explanation. I didn’t know it was owned by Sitepoint. I’m used to articles being full of helpful information, rather than just a sample of a course you can “purchase” – which is very much counter to the model I’m used to seeing in Sitepoint articles (which I generally, absolutely LOVE).

        • LouisLazaris

          No problem, I’m glad you’re enjoying the articles.

          But thanks for the feedback, we’ll keep that in mind for future posts. It’s certainly better to have more complete info. But I suppose you could view this one as a single post covering one selector, which isn’t all that unusual.

  • Thanks! Kinda cool for a quick visual way to identify empty elements by just adding *:empty{height: 1em; border: 1px solid red;} to the stylesheet.

Get the latest in Front-end, once a week, for free.