Структурные псевдоклассы CSS3

Чем дольше вы будете заниматься созданием сайтов, тем чаще вам, скорее всего, будет необходимо снова и снова решать одну и ту же задачу. Рассмотрим типичный пример. Горизонтальные навигационные панели зачастую состоят из равномерно расположенных ссылок. Допустим, нам необходимо добавить поле справа и слева от каждого элемента списка за исключением первого и последнего элементов. Исторически сложилось так, что решить эту задачу можно добавлением семантически значимого имени класса в первый и последний элементы списка, как показано в выделенных строках в приведенном далее фрагменте кода:

<ul>

<li class="first"><a href="#">Why?</a></li>

<li><a href="#">Synopsis</a></li>

<li><a href="#">Stills/Photos</a></li>

<li><a href="#">Videos/clips</a></li>

<li><a href="#">Quotes</a></li>

<li class="last"><a href="#">Quiz</a></li>

</ul>

Затем, добавив пару правил в CSS, мы сможем изменить размеры полей для этих двух элементов списка:

Li {

Margin-left: 5%; margin-right: 5%;

}

.first {

Margin-left: 0px;

}

.last {

Margin-right: 0px;

}

Это решение сработает, однако его нельзя назвать гибким. Например, при создании сайта на основе системы управления содержимым элементы списка для ссылки на новое содержимое могут добавляться автоматически, поэтому добавление или удаление класса last или first для соответствующего элемента списка в разметке может оказаться непростой задачей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *