Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement