Czasem trudno sie odnaleść w strukturze dokumentu, w nagromadzeniu DIV-ów w sobie wzajemnie pozagnieżdżanych. By przetestować strukturę dokumentu może być pomocna taka konstrukcja która pozwoli zobaczyć strukturę dokumentu, jeśli dodamy ją to naszego pliku CSS.
* { outline: 2px dotted white }
* * { outline: 2px dotted red }
* * * { outline: 2px dotted green }
* * * * { outline: 2px dotted orange }
* * * * * { outline: 2px dotted blue }
Lub gdy chcemy zbadać naszą strukturę DIVów którymi budujemy konstrukcję strony, to dopiszmy do pliku CSS coś takiego.
Poniżej 2 przykłady w jednym zastosowałem test do sprawdzania a w dolnej nie. I tak widać że 06 jest obrysowany na niebiesko co tu znaczy, że jest najgłębiej zakopany w strukturze moich DIVów (a starałem się ją porządnie zamotać)
div { outline: 2px dotted white }
div div { outline: 2px dotted red }
div div div { outline: 2px dotted green }
div div div div { outline: 2px dotted orange }
div div div div div { outline: 2px dotted blue }
01
02
03
04
05
06
07
08
09
10
01
02
03
04
05
06
07
08
09
10
Uwagi
Oczywiście możesz sobie tą piramidę selektorów (tu * i div) dalej rozbudowywać jeśli dokument który będziesz testował jest jeszcze bardziej złożony.
Czasem dla widoczności lepszej, można zmienić kolory linni
Dobrze taki test mieć cały czas w pliku CSS, a by czasem nieprzeszkadzał zablokować jego działanie znakami komentarza
/* blokowany fragment pliku */
OUTLINE nie zadziała w InternetExporerze