Как разобраться в структуре разметки (непонятно для чего необходим один кусок кода)?

Question

[gleendo]

В общем увидел небольной сайтик, оч понравился, решил научиться делать также. Взял исходники, посмотрел, вроде бы и кода очень мало и должно быть все понятно, сначала вообще ничего не понимал, начал разбираться, вроде как понял большинство, а вот для чего в разметке так много оберток, какую роль они играют и для чего вообще это, так и не могу понять, и зачем там класс у них, который не используется в css?
Я понимаю что есть список(боковое меню, с сылками на id), есть 5 страниц, которые смещены на 200%. При нажатии на ссылку(элемент меню), страница с одноименным id "приезжает" на главный экран. Но вот остальное мне непонятно, как это все действует, и для чего нужны наружние обертки, одна в другой, для чего???

Объясните пожалуйста основную идею этого сайта, как он устроен.

Вот ссылка на сайт с исходниками

Answer 1

[Walt Disney]

обёртки это div с классом ct?
На них указывают якорные ссылки,
нужны они, что бы срабатывали правила содержащие :target,
в друг друга они вложены для того что бы все элементы внутри низ были вложены во всех них и можно было задавать одинаковые каскадные правила типа:

#t4:target .p1,
#t5:target .p1
background black

Comments

[gleendo]

Спасибо канешн за ответ, но все равно неоч понятно( Что посоветуете почитать по этой теме, чтобы разобраться. Какие ключевые слова для поиска инфы?

[Walt Disney]

"псевдокласс target" "якорные ссылки" остальное в вашем примере это вариации анимации ("transform") которые не имеют большого значения

читать всегда лучше спецификации хотя бы на том же htmlbook.ru

[gleendo]

Walt Disney: Спасибо. Почитаю