dupe_DOM_nodes.txt

Using *:empty to Troubleshoot Your CSS
Nicole Ramsey is a freelance developer for An Event Apart and QA Lead for Modern Tribe. She still views source when possible, wishes she could remember all shortcuts without a cheat sheet, and fusses with her dotfiles more than is necessary. Here, she shares a CSS troubleshooting tip:

One of the simplest, but most useful, tools in my QA toolkit is the *:empty pseudo selector. This selector affects elements that contain either nothing or only an HTML comment. Caveats: This won’t catch elements if there is whitespace and it will false-positive catch <img> elements.

Example

*:empty {border: 5px solid red;}

<p>Awesome content</p>

<p></p> <--unwanted output :empty will outline-->

<p>
</p> <--this element would not be caught using :empty-->

Using this selector allows you to visually track down extraneous markup before you begin checking your stylesheets for margin/border/padding spacing issues on your page. You can add this easily as a new style rule using browser developer tools, too.