Debugging with CSS – outline all elements

CSS - Debug nested elements in HTML layoutSometimes document structure and layout could be very difficult and complex. To achieve some goals designers tend to use a lot of nested elements in their code and after that style them with CSS. What if you want to see all this elements and how they are located and related to each other. There is one really fast solution to this problem through use of a couple lines of CSS:
[cc escaped=”true” lang=”css”]* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }[/cc]
All this code does is to highlight all elements and their nested elements. This will work up to 8 levels of nested elements in the HTML layout. If you want to distinguish more just add an extra row with extra asterisk.

More professional approach

You can achieve the same result with more professional approach by using add-on for your browser. For example in Firefox you can use the very popular Web Developer add-on. It has many useful functions that will help you in your daily routine but in our case we will use just 2 of them:

– Display Div order
– Display Element information

The first function is accessible through the toolbar, click on “Information -> Display Div Order” this will highlight all DIV elements in current document within all level. The only demerit is that all elements are with same border colour (red) and only DIV tags are shown.

The second option will highlight all elements and will provide even extra information for each of them like class, id, width, height, parent, ancestors and etc. This option is accessible through the toolbar “Information -> Display Element Information“. This is also accessible through short cut key combination: “Ctr + Shift + F“. This should bring an information window in the right hand side and will change the cursor allowing you to select element from current page. Upon selection the information window will display detailed data for the selected element. Play around with this function I am sure it help you a lot in your daily tasks.

If you have other ideas for layout and CSS debugging don’t hesitate to write them in the comments area below.


Just a guy with strong interest in PHP and Web technologies

Tagged with: , , , , ,
2 comments on “Debugging with CSS – outline all elements
  1. shimo says:

    thanks for sharing.

  2. Rob Grattan says:

    Thanks – helped me a lot.

Leave a Reply to Rob Grattan Cancel reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.