This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Target empty elements using the :empty pseudo-class

    Damon BauerDamon Bauer

    You can target an element that has no child elements by using the :empty pseudo-class. With browser support down to IE9, it's solid, easy way to select empty elements without any additional markup.

    Be aware that whitespace is considered a "child", so :empty will not work if the element has no children, but has space between the opening and closing tags.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 I've set up some HTML to display a notification bar. I've also added some basic styles to add border, margin, and padding. If I add an empty notification bar using the div class of alert, you'll see that the notification bar renders with margin, background color, and padding and all of this.

    00:19 Using the empty pseudo-class we can target the alert notification bar by saying "alert and empty." Inside of that CSS block just say "display none," and you'll see that the empty notification bar disappears.

    00:37 Instead of targeting the alert class twice, we can chain multiple pseudo-classes together. I'll comment this block. I'll comment this block. I'll come back to the original block. I can say "not" and then inside of the not selector, say "empty." This way, any element with the class of alert that is not empty will receive these following styles.

    Discuss

    Discuss