Задаем стили элементам в зависимости от количества потомков

28 ноября 2015 | Опубликовано в css | 2 Комментариев »

Изначальная идея задавать стили элементам в зависимости от количества потомков принадлежит André Luís, но мы считаем, что ее можно улучшить, значительно сократив количество нужного кода CSS. О чем мы и расскажем в этом уроке.

Код CSS у André выглядит так:

/* один элемент */
li:nth-child(1):nth-last-child(1) {
        width: 100%;
}

/* два элемента */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
        width: 50%;
}

/* три элемента */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
        width: 33.3333%;
}
/* четыре элемента */
li:nth-child(1):nth-last-child(4),
li:nth-child(2):nth-last-child(3),
li:nth-child(3):nth-last-child(2),
li:nth-child(4):nth-last-child(1) {
        width: 25%;
}

Эти стили задаются с помощью обращения к элементу с использованием селекторов :nth-child и :nth-last-child. Как Вы могли заметить, общее количество правил равно общему количеству элементов в каждом примере.

Хотя все, что действительно нужно, — обратиться к первому элементу. А к остальным элементам можно просто обратиться с помощью родственного селектора. С помощью этих улучшений количество правил для каждого примера сократилось до двух, так что этот способ стал удобным и для гораздо большего количества потомков:

/* один элемент */
li:first-child:nth-last-child(1) {
        width: 100%;
}

/* два элемента */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
        width: 50%;
}

/* три элемента */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
        width: 33.3333%;
}
/* четыре элемента */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
        width: 25%;
}

Результаты можно увидеть по ссылке ниже:

Демонстрация работы

Код HTML

<ul>
    <li>1</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Код CSS

ul {
    padding:10px 1px;
    overflow:hidden;
}

li {
    float:left;
    outline:1px solid gray;
    text-align:center;
    line-height:2;
}

/* один элемент */
li:first-child:nth-last-child(1) {
        width: 100%;
}

/* два элемента */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
        width: 50%;
}

/* три элемента */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
        width: 33.3333%;
}
/* четыре элемента */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
        width: 25%;
}

Да, Flexbox и другие модели верстки могут заменить подобные способы для задания ширины и размещения элементов, но можно задавать и другие стили элементам, в зависимости от их количества в группе.

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

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также:

Опубликовано в css, ноября 28, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

Задаем стили элементам в зависимости от количества потомков

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые