Селектор last-child

Еще в версии CSS 2.1 был селектор, соответствующий первому элементу списка: li:first-child.

Однако в CSS3 появился селектор, который соответствует последнему элементу списка Li:last-child.

Если использовать эти селекторы сообща, то у нас не будет необходимости в дополнительных классах в нашей разметке.

Откорректируем навигацию сайта And the winner isn’t., задействовав эти селекторы в сочетании со свойством display: table. На рисунке 5.7 показано, как все выглядит на текущий момент.

Теперь взглянем на графический макет (рисунок 5.8).

Ссылки на навигационной панели растянуты на всю ширину дизайна, и нам необходимо это воспроизвести. Наша разметка для навигационной области выглядит так:

<nav role="navigation">

<ul>

<li><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><a href="#">Quiz</a></li>

</ul>

</nav>

Страница сайта And the winner isn’t. с обычной навигацией.

Сначала мы сделаем так, чтобы элемент nav отображался как таблица:

Nav { display: table;

/* еще код… */

}

Затем мы обеспечим отображение <ul> в виде строки таблицы:

Nav ul { display: table-row;

/* еще код… */

}

И наконец, сделаем так, чтобы элементы списка отображались как ячейки таблицы:

Nav ul li { display: table-cell;

/* еще код… */

}

Рисунок 5.8. Макет страницы, к которому мы стремимся

Это означает, что при добавлении дополнительных элементов списка они будут автоматически расставляться с соответствующими промежутками. И наконец, используем наши CSS-селекторы для выравнивания первого и последнего элементов списка по правому и левому краям:

Nav ul li:last-child { text-align: right;

}

Nav ul li:first-child { text-align: left;

}

Затем, открыв страницу в браузере, мы увидим, что навигационная область стала больше походить на ту, что приводилась в оригинальной композиции (рисунок 5.9).

НЕ БЕСПОКОИТЕСЬ, ВСЕ ЭТИ ТАБЛИЦЫ ИСПОЛЬЗУЮТСЯ ТОЛЬКО ДЛЯ ВИЗУАЛЬНОГО ПРЕДСТАВЛЕНИЯ!

Вы, возможно, задаетесь вопросом: «О чем же я, в конце концов, думаю?», решив, что мы используем таблицы для навигационного макета. Однако не стоит забывать, что все эти.

Таблицы предназначены только для визуального представления. Это означает, что они существуют лишь в CSS и не имеют отношения к разметке. Мы просто сообщаем браузеру, что желаем, чтобы соответствующие элементы отображались и вели себя так, как если бы они были таблицами, а не чтобы они на самом деле были ими. Отображение элементов разметки в такой манере также не помешает нам задействовать иной тип макета для областей просмотра с другой шириной, например display: inline-block для областей просмотра шириной менее 768 пикселов.

Теперь строка навигации растянута на ширину страницы.

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

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