Порядок элементов css – Решено с помощью CSS! Логическая стилизация на основе числа элементов — CSS-LIVE

использование свойств nth-child и order

От автора: на первый взгляд создать макет masonry с помощью flexbox довольно просто; все, что вам нужно сделать, это установить для flex-flow — column wrap, и вуаля, у вас есть макет masonry. Что-то вроде того. Проблема этого подхода заключается в том, что он создает сетку с визуально перетасованным и непонятным порядком. Элементы будут (без ведома пользователя) отображаться сверху вниз, и кто-то, анализирующий сетку слева направо, будет читать поля в произвольном порядке, например, 1, 3, 6, 2, 4, 7, 8, 5 и так далее, и тому подобное.

Во Flexbox нет простого способа вывести элементы с макетом column при использовании порядка row, но мы можем построить макет masonry CSS (JavaScript не требуется) — с помощью свойств :nth-child() и order. В сущности, вот прием для создания порядка row при использовании flex-direction: column, учитывая, что вы отображаете три столбца:

/* Отображение элементов в столбцах */ .container { display: flex; flex-flow: column wrap; } /* Реорганизация элементов в два ряда */ .item:nth-child(3n+1) { order: 1; } .item:nth-child(3n+2) { order: 2; } .item:nth-child(3n) { order: 3; } /* Введение нового столбца */ .container::before, .container::after { content: «»; flex-basis: 100%; width: 0; order: 2; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* Отображение элементов в столбцах */ .container {   display: flex;   flex-flow: column wrap; }   /* Реорганизация элементов в два ряда */ .item:nth-child(3n+1) { order: 1; } .item:nth-child(3n+2) { order: 2; } .item:nth-child(3n)   { order: 3; }   /* Введение нового столбца */ .container::before, .container::after {   content: «»;   flex-basis: 100%;   width: 0;   order: 2; }

Это создаст макет masonry с элементами, представленными в виде столбцов, но упорядоченными в виде рядов (серые вертикальные линии представляют псевдо-элементы, которые создают разрывы строк):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте разберем эту проблему (или вы можете посмотреть набор кодов).

Выберите меньшее из двух зол: перетасованный порядок или странные отступы

Flexbox на самом деле не рассчитан на создание masonry; если установить фиксированную высоту для flex-контейнера (так, чтобы элементы могли переноситься) и column wrap для flex-flow, вы получите что-то вроде этого:

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

Если мы вместо того, чтобы изменить значение flex-direction на row и получить элементы различной высоты, мы достигнем правильного порядка, то получим странные и неожиданные отступы:

Таким образом, кажется невозможным взять лучшее из обоих миров: элементы, представленные в виде столбцов, но упорядоченные в виде строк. Вы можете решить использовать flex-direction: column и просто перемещаться по элементам в HTML для достижения правильного визуального порядка, но это может быть громоздким, излишне сложным, и исказит порядок табуляции элементов.

Изменение порядка элементов с помощью order и nth-child()

Свойство order влияет на порядок элементов, содержащихся во flexbox или grid, и мы можем использовать его, чтобы переупорядочить элементы для нашего будущего макета masonry. Свойство order довольно просто в использовании: если у вас есть два элемента и один имеет order: 1, а другой order: 2, элемент с order: 1 отображается перед другим элементом, независимо от их порядка в исходном коде HTML.

Решение для CSS masonry зависит от деталей спецификации order: что произойдет, если два или более элементов имеют одинаковое значение order? Кто отображается первым? Flexbox использует порядок исходного кода: элемент, который указан первым в исходном коде, будет отображаться раньше других элементов с таким же значением order. Этот факт дает нам возможность легко перегруппировать элементы в сетке, так что мы можем изменить порядок со столбцов на строки, и при этом отображая строки, как столбцы, используя nth-child().

Посмотрите на таблицу ниже. Чтобы добиться нужного порядка с помощью flex-direction: row, нам просто нужно отобразить элементы в порядке по умолчанию: 1, 2, 3, 4, 5, 6 и т. д.

Если мы хотим добиться того же порядка при использовании, flex-direction: column, нам нужно изменить порядок элементов, чтобы он соответствовал порядку каждого столбца в таблице (а не каждой строки):

Т.е. первые элементы в нашем макете flexbox должны быть 1, 4, 7, 10. Эти элементы будут заполнять первый столбец, далее следуют 2, 5, 8, 11 — 2-й столбец, и 3, 6, 9, 12 — 3-й и последний столбец. Вот где в игру вступает селектор nth-child(). Мы можем использовать его для выбора каждого третьего элемента (3n), начиная с первого элемента (3n+1), и установить для всех этих элементов одинаковое значение order:

.item:nth-child(3n+1) { order: 1; }

.item:nth-child(3n+1) { order: 1; }

Этот селектор устанавливает order: 1для элементов 1, 4, 7, 10 в контейнере, то есть для всего первого столбца. Другими словами, мы используем комбинацию nth-child() и order для реорганизации элементов в зависимости от их первоначального порядка. Чтобы создать 2-й и 3-й столбец, мы просто изменим смещение:

.item:nth-child(3n+1) { order: 1; } .item:nth-child(3n+2) { order: 2; } .item:nth-child(3n) { order: 3; }

.item:nth-child(3n+1) { order: 1; } .item:nth-child(3n+2) { order: 2; } .item:nth-child(3n)   { order: 3; }

Здесь мы создаем три набора: 1, 4, 7, 10 (3n + 1) с order: 1; 2, 5, 8, 11 (3n + 2) с order: 2; и 3, 6, 9, 12(3n) с order: 3. Все вместе дает следующий порядок — 1, 4, 7, 10, 2, 5, 8, 11, 3, 6, 9, 12.

Если мы проследим, чтобы каждая из этих групп отображалась как один столбец (и не более), это создаст иллюзию того, что элементы вернулись в свой первоначальный порядок при чтении слева направо. Если мы визуально анализируем сетку как строки, первый ряд будет содержать первый элемент из каждой группы (1, 2, 3), второй ряд будет содержать второй элемент из каждой группы ( 4, 5, 6) и так далее. С помощью этой техники мы можем создать макет masonry с элементами, отображаемыми в виде столбцов, но упорядоченными, как ряды.

Как влияет перетасовывание элементов вроде этого на порядок табуляции? К счастью, совсем не влияет. order изменяет только визуальное представление объектов, а не последовательность табуляции, поэтому табуляция в сетке будет работать так, как задумано.

Предотвращение слияния столбцов

Если в макете masonry много элементов, эта техника наверняка в какой-то момент сломается. Мы рассчитываем на то, что каждая созданная нами «группа» будет отображаться как один столбец, но в действительности элементы могут иметь разную высоту, и столбцы могут легко начать объединяться. Например, первый столбец может быть длиннее двух других, что может привести к началу третьего столбца в конце второго:

Выделенный здесь блок (3) должен отображаться в начале третьего столбца, иначе алгоритм сломается, но если в конце второго столбца есть место для другого элемента, он, естественно, будет отображаться там.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы можем исправить эту проблему, принудительно перезапуская столбцы в определенные моменты. Нет простого способа указать с помощью flexbox — «этот элемент должен переноситься в следующий ряд», но мы можем добиться этого эффекта, добавив невидимые элементы, которые занимают 100% высоты контейнера. Поскольку для их отображения требуется 100% высоты родительского элемента, они не поместятся в столбце вместе с любым другим элементом, поэтому они по существу будут вызывать перенося строк, создавая разорванные столбцы.

Нам нужно вставить эти элементы разрыва строки в сетку и массив элементов, чтобы создать такую последовательность элементов будет: 1, 4, 7, 10, <break>, 2, 5, 8, 11, <break>, 3, 6, 9, 12. Мы можем использовать псевдо-элементы, и мы можем установить order 2 для них обоих. Добавление псевдо-элемента с помощью :before сделает его первым дочерним элементом контейнера, а добавление псевдо-элемента с помощью :after сделает его последним дочерним элементом контейнера, поэтому, если мы установим order: 2 для обоих элементов, они станут первым и последним элементом «группы» с order: 2 (так как они выводятся до и после других элементов) — :before, 2, 5, 8, 11, :after.

/* Вводим новый столбец */ .container::before, .container::after { content: «»; flex-basis: 100%; width: 0; order: 2; }

/* Вводим новый столбец */ .container::before, .container::after {   content: «»;   flex-basis: 100%;   width: 0;   order: 2; }

Я выделил псевдо-элементы ниже, чтобы показать их эффект. Обратите внимание, что несмотря на то, что блок 3 будет помещаться во 2-ом столбце, он отображается как первый элемент в последнем столбце:

Решение

В качестве последнего шага нам нужно обеспечить, чтобы flex-контейнер имел заданную высоту, которая делает его выше, чем ваш самый высокий столбец (чтобы поместились все столбцы). Вместе, это создаст CSS макет masonry с тремя столбцами (также доступно на codepen):

.container { display: flex; flex-flow: column wrap; align-content: space-between; /* Для контейнера нужна фиксированная высота, и он * должен быть выше самого высокого элемента. */ height: 600px; } .item { width: 32%; margin-bottom: 2%; /* Опционально */ } /* Реорганизуем элементы в 3 ряда */ .item:nth-child(3n+1) { order: 1; } .item:nth-child(3n+2) { order: 2; } .item:nth-child(3n) { order: 3; } /* Вводим новый столбец */ .container::before, .container::after { content: «»; flex-basis: 100%; width: 0; order: 2; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.container {   display: flex;   flex-flow: column wrap;   align-content: space-between;   /* Для контейнера нужна фиксированная высота, и он    * должен быть выше самого высокого элемента. */   height: 600px; }   .item {   width: 32%;   margin-bottom: 2%; /* Опционально */ }   /* Реорганизуем элементы в 3 ряда */ .item:nth-child(3n+1) { order: 1; } .item:nth-child(3n+2) { order: 2; } .item:nth-child(3n)   { order: 3; }   /* Вводим новый столбец */ .container::before, .container::after {   content: «»;   flex-basis: 100%;   width: 0;   order: 2; }

Ваш HTML должен выглядеть следующим образом, по одному div на каждый элемент в сетке:

<div> <div></div> <div></div> <div></div> … </div>

<div>   <div></div>   <div></div>   <div></div>   … </div>

Работа более чем с тремя столбцами

Чтобы создать макет masonry с более чем тремя столбцами, нам нужно сделать несколько вещей: адаптировать наш алгоритм сортировки, обновить ширину элементов и вручную вставить элементы разрыва строки (вместо использования псевдо-элементов). Я составил список кодов, демонстрирующих flexbox masonry с 3, 4, 5 и 6 столбцами.

Поскольку мы ограничены созданием только двух псевдо-элементов с помощью :before и :after, нам нужно прибегнуть к ручному добавлению элементов разрыва в контейнер (вам нужно на один элемент разрыва меньше, чем количество столбцов в макете). Вы можете просто добавить их в конец контейнера, они будут отсортированы в соответствующие столбцы:

<div> <div></div> <div></div> <div></div> <div></div> … <span></span> <span></span> <span></span> </div>

<div>   <div></div>   <div></div>   <div></div>   <div></div>   …   <span></span>   <span></span>   <span></span> </div>

Мы вставляем разрывы столбцов, как span, чтобы сортировать их независимо от элементов содержимого. Нам нужен способ «перезапустить» подсчет, как только мы достигнем элементов разрыва, или, например, из-за неравномерного количества элементов первый элемент разрыва может начинаться после 3-го столбца. Селекторы :nth-of-type выбирают элементы различных типов независимо друг от друга, так что мы можем разделить порядок элементов контента и разрывы столбцов:

.item:nth-of-type(4n+1) { order: 1; } .item:nth-of-type(4n+2) { order: 2; } .item:nth-of-type(4n+3) { order: 3; } .item:nth-of-type(4n) { order: 4; }

.item:nth-of-type(4n+1) { order: 1; } .item:nth-of-type(4n+2) { order: 2; } .item:nth-of-type(4n+3) { order: 3; } .item:nth-of-type(4n)   { order: 4; }

Элементы разрыва, как и ранее, занимают всю высоту контейнера:

/* Вводим новый столбец */ .break { flex-basis: 100%; width: 0; margin: 0; }

/* Вводим новый столбец */ .break {   flex-basis: 100%;   width: 0;   margin: 0; }

Это создаст макет с четырьмя столбцами (см. Codepen):

Вот полное решение для CSS masonry с четырьмя столбцами:

.container { display: flex; flex-flow: column wrap; align-content: space-between; /* Для контейнера нужна фиксированная высота, и он * должен быть выше самого высокого элемента. */ height: 600px; } .item { width:24%; margin-bottom: 2%; /* Optional */ } /* Реорганизуем элементы в 4 ряда */ .item:nth-of-type(4n+1) { order: 1; } .item:nth-of-type(4n+2) { order: 2; } .item:nth-of-type(4n+3) { order: 3; } .item:nth-of-type(4n) { order: 4; } /* Вводим новый столбец */ .break { flex-basis: 100%; width: 0; margin: 0; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

.container {   display: flex;   flex-flow: column wrap;   align-content: space-between;   /* Для контейнера нужна фиксированная высота, и он    * должен быть выше самого высокого элемента. */   height: 600px; }   .item {   width:24%;   margin-bottom: 2%; /* Optional */ }   /* Реорганизуем элементы в 4 ряда */ .item:nth-of-type(4n+1) { order: 1; } .item:nth-of-type(4n+2) { order: 2; } .item:nth-of-type(4n+3) { order: 3; } .item:nth-of-type(4n)   { order: 4; }   /* Вводим новый столбец */ .break {   flex-basis: 100%;   width: 0;   margin: 0; }

Этот способ создания макета masonry (или мозаики), безусловно, не такой стабильный, гибкий и надежный, как JavaScript реализация (например, Masonry ), но если вы не хотите применять стороннюю библиотеку только для создания макет кладки masonry, я надеюсь, что эти приемы макетов могут вам пригодиться.

Для получения информации по другим распространенным шаблонам CSS flexbox, я составил список примеров flexbox, которые вы можете скопировать и вставить в свои проекты.

Автор: Tobias Bjerrome Ahlin

Источник: https://tobiasahlin.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

основные правила написания стилей, методы упорядочивания

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

Ответ на эти вопросы неоднозначен. Поскольку я читаю все больше и больше на эту тему, я нашел много мнений по этому поводу. Некоторым это небезразлично, а другим — нет, поэтому трудно найти объективную точку зрения.

Самый простой способ — подойти к этой концепции с личной точки зрения. Я попытаюсь продемонстрировать это как с объективной, так и с субъективной точки зрения, и я надеюсь, это мне удастся.

Что это?

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

То, в каком порядке в CSS объявляются свойства, не имеет значения. Вы можете написать любое свойство в любом порядке, и ваша таблица стилей будет работать как обычно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Основная проблема здесь — случайность. Можем ли мы контролировать последовательность и сделать ее лучше для нас? Стоит ли тратить время и силы на это? Будет ли наш код лучше, если мы всегда будем писать объявления в определенном порядке? Ну, ответ — и да, и нет.

Доступные методы

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

Случайный порядок

Для тех, кто любит писать свои стили в случайном порядке. Не следовать правилам — это все равно правило. Эта концепция является той, которая обычно вызывает дискуссии.

.btn { color: #fff; background-color: blue; display: inline-block; padding: 0.5em 1em; font-size: 0.8rem; border-radius: 2px; font-weight: 700; overflow: hidden; border: none; }

.btn {     color: #fff;     background-color: blue;     display: inline-block;     padding: 0.5em 1em;     font-size: 0.8rem;     border-radius: 2px;     font-weight: 700;     overflow: hidden;     border: none; }

Группируйте их логически

Логически мы можем сгруппировать стили разными способами. В основном распространенными вариантами являются макет, типографика, блочная модель, визуальные свойства и другие.

.btn { display: inline-block; overflow: hidden; padding: 0.5em 1em; color: #fff; background-color: blue; border: none; border-radius: 2px; font-size: 0.8rem; font-weight: 700; }

.btn {     display: inline-block;     overflow: hidden;       padding: 0.5em 1em;       color: #fff;     background-color: blue;     border: none;     border-radius: 2px;       font-size: 0.8rem;     font-weight: 700; }

Алфавитный порядок

Использование алфавита упорядочивает ваши свойства — как вы уже догадались — на основе алфавита.

.btn { background-color: blue; border: none; border-radius: 2px; color: #fff; display: inline-block; font-size: 0.8rem; font-weight: 700; overflow: hidden; padding: 0.5em 1em; }

.btn {     background-color: blue;     border: none;     border-radius: 2px;     color: #fff;     display: inline-block;     font-size: 0.8rem;     font-weight: 700;     overflow: hidden;     padding: 0.5em 1em; }

С объективной точки зрения

Объективно, контроль порядка действительно является проблемой. Мы хотим навести порядок в хаосе. Так что это хорошая идея.

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

Хотя это и объективный раздел, я должен отметить, что это личное предпочтение. Все люди разные, и то, что подходит для меня не является окончательным решением для всех.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Группировка по алфавиту или логически может сделать наш код более согласованным.

С моей личной точки зрения

Мне нравится случайный порядок. У меня всегда в голове вопрос: должен ли я использовать какой-то метод для организации своего кода? Я пробовал как по алфавиту, так и по группам, но не придерживался ни того, ни другого.

В некоторых случаях мы все пишем упорядоченный CSS, думаем о сокращениях и тех свойствах, в которых мы устанавливаем значения для четырех направлений ( margin: top right bottom left;). Мы выучили направление по часовой стрелке, и в основном следуем этому, когда устанавливаем позицию следующим образом:

.btn { position: absolute; top: 0; right: auto; bottom: auto; left: 0; }

.btn {     position: absolute;     top: 0;     right: auto;     bottom: auto;     left: 0; }

Здесь порядок не имеет значения, но я тоже следую ему. Для меня еще одним примером является свойство content. Если я использую его, то всегда добавляю в начало блока.

.btn::before { content: »; … }

.btn::before {     content: »;     … }

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

При алфавитном порядке когнитивная нагрузка невелика, все сразу это понимают, и вы легко можете избежать ошибок дублирования.

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

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

Я не думаю, что использование одного из этих методов поможет вам в поиске конкретной строки. В современных средах IDE смехотворно легко выделить или исследовать что-то. Для разработчика среднего уровня, который ежедневно просматривает код, это не проблема.

Если вы хотите получить более качественный и чистый код, лучшее решение — использовать правильно настроенный линтер; это поможет в проверке системы и в исправлении «ошибок» на основе руководства по стилю кодирования. Я думаю, что все методы в какой-то мере являются случайными.

Stylelint и CSSComb

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

Наиболее продвинутым и популярным на сегодняшний день является Stylelint, фантастический инструмент с отличными возможностями. Для получения дополнительной информации посетите их официальный сайт. В VS Code мы можем легко его настроить — как другие линтеры.

CSSComb — более старый инструмент, и это не линтер, а органайзер кода. Запустив его, вы можете проработать код на основе предопределенных правил. Мы также можем легко настроить его в VS Code.

Источник: https://pineco.de/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Учебник CSS 3. Статья «Селекторы. Часть 4»

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

Селекторы типов дочерних элементов

Псевдокласс :first-of-type

Псевдокласс :first-of-type применяет заданный стиль к элементу, который является первым дочерним элементом, определенного типа внутри родительского элемента.

---

Отличие псевдокласса :first-of-type от :first-child заключается в том, что он выбирает первый дочерний элемент определенного типа, а не первый дочерний элемент этого типа. Псевдокласс :first-child мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

---

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль первым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-of-type</title>
<style>
.test p:first-of-type { /* используем селектор потомков с псевдоклассом :first-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :first-of-type мы стилизовали первые абзацы внутри каждого блока.

Результат нашего примера:

Рис. 25а Пример использования псевдокласса :first-of-type.

Псевдокласс :last-of-type

Псевдокласс :last-of-type применяет заданный стиль к элементу, который является последним дочерним элементом определенного типа внутри родительского элемента.

---

Псевдокласс :last-of-type работает как и :last-child, но применяется к дочернему элементу определенного типа, а не к элементу с любым типом. Псевдокласс :last-child мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

---

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль последним абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :last-of-type</title>
<style>
.test p:last-of-type { /* используем селектор потомков с псевдоклассом :last-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
		<hr>
		<div class = "test"> 
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :last-of-type мы стилизовали последние абзацы внутри каждого блока.

Результат нашего примера:

Рис. 25б Пример использования псевдокласса :last-of-type.

Псевдокласс :nth-of-type

Псевдокласс :nth-of-type выбирает каждый указанный элемент определенного типа, который является дочерним элементом своего родительского элемента.

---

Псевдокласс :nth-of-type работает, как и :nth-child, но применяется к чередующимся дочерним элементам определенного типа, а не к элементу с любым типом. Псевдокласс :nth-сhild мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

---

Псевдокласс имеет следующий синтаксис:

:nth-of-type(номер | ключевое слово | формула) {
блок объявлений;
}

В качестве значения псевдокласса :nth-of-type может выступать не только порядковый номер дочернего элемента определенного типа, но и ключевые слова, которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

• even (четные элементы)
• odd (нечетные элементы)

Кроме того псевдокласс :nth-of-type, как и :nth-child в качестве значения может использовать простую математическую формулу:

p:nth-of-type(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная со второго внутри родительского элемента будет стилизована:

• 4n – каждый четвертый элемент определенного типа.
• 2 – с какого элемента начинать.

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

p:nth-of-type(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждый четвёртый элемент <p>, начиная с третьего (-1 элемента нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизован:

• 4n – каждый четвертый элемент определенного типа.
• -1 – с какого элемента начинать.

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль вторым абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :nth-of-type</title>
<style>
.test p:nth-of-type(2) { /* используем селектор потомков с псевдоклассом :nth-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
		<div class = "test"> 
			<h3>Заголовок второго уровня</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-of-type мы стилизовали первые абзацы внутри каждого блока.

Результат нашего примера:

Рис. 25в Пример использования псевдокласса :nth-of-type.

Отличие :nth-child от :nth-of-type()

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

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

<article>
	<p>Первый параграф </p>
	<p>Второй параграф</p> 
</article>

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

p:nth-child(2)  {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
p:nth-of-type(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h3>), про него мы совсем забыли:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Отличие :nth-child() от :nth-of-type()</title>
<style>
p:nth-of-type(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
p:nth-child(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<article>
			<h3>Заголовок второго уровня</h3>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</article>
	</body>
</html>

Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:

Рис. 25г Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h3>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо. Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.

Селектор смежных элементов

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

Селектор смежных элементов использует знак + для соединения одного элемента с другим и выбирает все первые указанные элементы внутри родительского элемента, которые следуют сразу же за смежным для него элементом.

Перед нами стоит задача стилизовать все абзацы (элементы <p>), которые следуют сразу за элементом <h3> (они выделены оранжевым цветом на изображении):

Рис. 26 Выбор смежных элементов в документе.

---

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

---

Что касается смежных элементов, то для того, чтобы нам выбрать все элементы <p>, которые следуют сразу за <h3>, то нам необходимо создать следующий селектор:

h3+p {
блок объявлений;
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор смежных элементов</title>
<style>
h3+p {
background-color: lightblue; /* задаём цвет заднего фона */
color: red; /* задаём цвет текста */
}
</style>
</head>
	<body>
		<div>
			<h3>Заголовок внутри div</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
		</div>
		<h3>Заголовок внутри body</h3>
		<p>Абзац один</p>
	</body>
</html> 

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

Результат нашего примера:

Рис. 26а Пример использования селектора смежных элементов.

Селектор следующих элементов

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

Использование селектора следующих элементов (элемент 1 ~ элемент 2) позволяет выбрать все элементы 2, которые следуют сразу же за элементом 1 (смежные элементы), а также все элементы 2, которые находятся на одном уровне вложенности (сестринские элементы, или другое название — соседние).

Перед нами стоит задача стилизовать все абзацы (элементы <p>), которые следуют сразу за элементом <h3> и элементы <p>, которые являются сестринскими по отношению к друг другу (они выделены оранжевым цветом на изображении):

Рис. 27 Выбор смежных и сестринских элементов в документе.

---

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

---

Для того, чтобы нам выбрать все элементы <p>, которые следуют сразу за <h3> и элементы <p>), которые являются сестринскими по отношению к друг другу, нам необходимо создать следующий селектор:

h3~p {
блок объявлений;
}

Кроме того, нам необходимо по особенному стилизовать все элементы, которые являются сестринскими для элемента <div> (элементы <h3> и <p>). Для этого нам необходимо использовать селектор следующих элементов с универсальным селектором:

div~* {
блок объявлений;
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор смежных элементов</title>
<style>
h3~p { /* выбираем все элементы <p> смежные и сестринские для <h3> */
background-color: lightblue; /* задаём цвет заднего фона */
color: red; /* задаём цвет текста */
}
div~* { /* выбираем все сестринские элементы <div> */
font-style: italic; /* устанавливаем курсивное начертание шрифта */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
}
</style>
</head>
	<body>
		<div>
			<h3>Заголовок внутри div</h3>
			<p>Абзац один</p>
			<p>Абзац два</p>
		</div>
		<h3>Заголовок внутри body</h3>
		<p>Абзац один</p>
	</body>
</html> 

В этом примере с использованием селектора следующих элементов мы стилизовали первые абзацы, которые следуют сразу после заголовков второго уровня (смежные элементы) и все сестринские абзацы. Кроме того, по особенному стилизовали все элементы, которые являются сестринскими для элемента <div>.

Результат нашего примера:

Рис. 27а Пример использования селектора следующих элементов.

---

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:


• Составьте следующие HTML страницы:
  1. С использованием селекторов типов дочерних элементов стилизуйте все абзацы, в соответствии с изображением:
     Практическое задание № 8.
  2. С использованием селекторов смежных элементов и селекторов следующих элементов стилизуйте все элементы, в соответствии с изображением:
     Практическое задание № 9.

После того как вы выполните упражнения проинспектируйте коды страниц, открыв примеры в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Обратный порядок элементов с помощью CSS Flexbox

От автора: CSS становится все более мощным инструментом. Мы почти дошли до той точки, когда порядок HTML элементов на странице не будет важен с точки зрения отображения. С помощью CSS сейчас можно создавать любые макеты, маленькие и большие. Забудем про семантику и доступность, на днях я думал, а можно ли инвертировать отображаемый порядок элементов только с помощью CSS. Раньше для этого нужно было менять DOM.

Смотреть демо

Например, у нас есть следующая разметка:

<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> </ul>

<ul>     <li>One</li>     <li>Two</li>     <li>Three</li>     <li>Four</li>     <li>Five</li>     <li>Six</li>     <li>Seven</li>     <li>Eight</li>     <li>Nine</li>     <li>Ten</li> </ul>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотите вы отображать элементы вертикально или горизонтально, для инверсии порядка элементов вам необходимо изменить значение flex-direction:

/* инверсия по горизонтали */ .row-reverse { display: flex; flex-direction: row-reverse; } /* инверсия по вертикали */ .column-reverse { display: flex; flex-direction: column-reverse; }

/* инверсия по горизонтали */ .row-reverse { display: flex; flex-direction: row-reverse; }   /* инверсия по вертикали */ .column-reverse { display: flex; flex-direction: column-reverse; }

Значение row-reverse показывает элементы в обратном порядке по горизонтали, а column-reverse инвертирует элементы по вертикали.

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

Я помню времена, когда люди думали, что Flexbox кардинально изменит CSS. Лично я не считаю, что Flexbox изменил интернет, но с ним можно делать потрясающие вещи. Я очень хочу расширить свои знания о Flexbox, а пока что буду делиться с вами вот такими кусочками кода!

Автор: David Walsh

Источник: https://davidwalsh.name/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Решено с помощью CSS! Логическая стилизация на основе числа элементов — CSS-LIVE

Перевод статьи Solved with CSS! Logical Styling Based on the Number of Given Elements с сайта css-tricks.com для CSS-live.ru, автор — Юна Кравец

Эта статья третья из серии про мощь CSS.

Все статьи серии:

А вы знали, что CSS — Тьюринг-полный? А что его можно использовать для вполне серьёзной логической стилизации? Можно-можно! И не нужно закладывать логику для стилевых правил в JavaScript, или навешивать скриптом классы, для которых вы задаете стили. Во многих случаях CSS сам справится с этим. Я до сих пор ежедневно открываю новые CSS-трюки, и этим CSS нравится мне всё больше и больше.

В этом году, я начала работать в издательстве Bustle Digital Group. В СМИ, как и во множестве продуктов,  команда разработчиков выстраивает платформу, которая должна подходить для всех практических задач. Наша CMS даёт возможность авторам и редакторам создавать статьи, а также править страницы и управлять вставкой рекламы.

В отличии от работы со статическим сайтом, команда разработчиков не может полностью контролировать данные, поступающие от пользователя, так что удобства для пользователей не достичь без дизайнерских решений и правил управления. Некоторые из таких сценариев, с которыми мы столкнулись в мире цифровых СМИ, подкинули нам настоящие головоломки по части пользовательского интерфейса, которые и вдохновили меня присмотреться к способам их решения на CSS.

Итак, взглянем на некоторые примеры!

Пример 1: бинарные состояния

Часто забытый и весьма полезный селектор — псевдоселектор :empty. Он позволяет оформлять элементы, отталкиваясь от того, есть ли в них контент или нет. Привет пустым состояниям! Пустые состояния — отличный способ «достучаться» до пользователя, «очеловечив» ваше приложение, и это можно сделать прямо из CSS.

В этом примере у нас есть какой-то список от пользователя. Это могут быть статьи, которые пользователь опубликовал (как автор), или сохранил в закладках (как редактор). Применений тут масса. Вместо JavaScript можно использовать псевдоэлементы для вставки изображения, стилей и текста:

Рисунки показывают, как стили применяются или нет в зависимости от того, есть в списке отображаемые элементы или нет.

И решение здесь — всего лишь три строчки кода:

div:empty:after {
  content: 'Ой, ничего';
}

Можете также добавить псевдоэлемент :before для вставки изображения или любого нужного вам контента. Как альтернатива, можно взять псевдоселектор :not вместе с :empty, сделать правило :not(:empty) и оформить им все непустые элементы, то есть элементы с контентом.

See the Pen Empty States by Максим (@psywalker) on CodePen.

Примечание: этот пример существует только в целях демонстрации этой техники. Нежелательно класть контент в псевдоэлементы по соображениям доступности. Можно использовать тот же прием выбора пустых (:empty) или непустых (:not(:empty)) элементов, чтобы применить к дочерним элементам более доступные для скринридеров стили.

Продвинутый выбор по количеству

Этот пример был неплохой разминкой, но на CSS можно не только проверять, если ли дочерние элементы, но и решать более сложные задачи. В этом нам пригодится псевдоселектор :nth-child! На CSS-Tricks есть отличный инструмент, помогающий тестировать и играть с выборкой :nth-child, и вскоре вы узнаете, что он действительно может пригодиться.

Но прежде давайте выясним, как именно это работает?

Главное в этом коде — вот что, где div обозначает любой элемент, соседей которого мы будем считать, а x — число соседей, при котором стиль должен меняться:

div:first-child:nth-last-child(n + x),
div:first-child:nth-last-child(n + x) ~ div

Использование :nth-last-child вместо :nth-child для выбора позволяет нам начать с конца последовательности, а не сначала. При выборе :nth-last-child(n + x) мы выбираем значение с номером x, начиная с конца. Если x = 3, то это выглядело бы так:

Иллюстрация того, как :nth-last-child(3) выбирает третий элемент с конца списка.

Итак, если мы хотим посчитать значения n + 3, мы выбираем все элементы, которые являются 3-м или более чем 3-м с конца. Начиная с n=0 (что будет значить 0 + 3), а 4-й элемент будет первым с конца после третьего. Это выглядит так:

Иллюстрация того, как :nth-last-child(n+3) выбирает все элементы, соответствующие 3 или более 3 с конца.

Начало неплохое, но идея в том, чтобы по условию стилизовать все элементы в зависимости от их количества. Поэтому нужно работать с этими условиями, но выбирать все элементы. Давайте начнём с выбора первого элемента. Нужно создать условие, чтобы увидеть, подходит ли вся выборка для стилизации, и затем начать с этого первого соседнего элемента:

Ой. Сейчас у нас выбран только первый элемент, а нам нужны все элементы. К счастью, для этого можно использовать очень удобный селектор соседних элементов (~).

Если изменить наш последний пример на :first-child:last-child(n + 3) ~ *, то он выберет все элементы, кроме первого, почти как нам нужно.

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

Сочетание обоих предыдущих примеров выберет все элементы в списке.

Пример 2: форматирование списка

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

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

Иллюстрации вертикального неупорядоченного списка (слева) и горизонтального списка, разделённого точкой с запятой (справа)

Можно проверить число доступных элементов и застилизовать их как блочные, пока не упрёмся в предел. В этот момент мы перейдём к строчному оформлению, добавив псевдоэлемент для визуального разбиения данных.

/* 5 или более элементов отображаются друг за другом */
li:first-child:nth-last-child(n + 5),
li:first-child:nth-last-child(n + 5) ~ li {
  display: inline;
}

/* Добавляем точку с запятой после каждого элемента кроме последнего */
li:first-child:nth-last-child(n + 5) ~ li::before {
  content: ';';
  margin: 0 0.5em 0 -0.75em;
}

:nth-first-child:nth-last-child(n + 5) позволяет сообщить: «начни с первого дочернего элемента и примени стили к нему и к элементам, следующим за ним, если их пять и более». Запутанно? Нуу, это работает.

li:first-child:nth-last-child(n + 5) выбирает первый элемент списка, а li:first-child:nth-last-child(n + 5) ~ li — каждый элемент, следующий за первым.

See the Pen RYWoZY by Максим (@psywalker) on CodePen.

Пример 3: карусель с условием

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

Иллюстрация карусели с тремя элементами (слева) и с четырьмя и более (справа)

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

Мы можем воспользоваться тем же самым приёмом, что в предыдущем примере, но нам ещё понадобится один лишь first-child, чтобы найти и отобразить в интерфейсе div со стрелкой. HTML выглядел бы так:

<ul>
  <li>
    <div>1</div>
  </li>
  <li>
    <div>2</div>
  </li>
  ...
  <button>——></button>
</ul>

Пустые элементы в DOM — не идельно, но смотрите. Это по-прежнему умный хак. Мы применим к кнопке .arrow visibility: hidden, сделав её невидимой для DOM и скринридеров, если условия не применяются (если элементов четыре или более). В противном случае мы отобразим её с помощью display: block, применим к ней стили и нужное позиционирование.

li:first-child:nth-last-child(n + 5) ~ .arrow {
  display: block;
  position: sticky;
  ...
}

See the Pen Box Alignment by Максим (@psywalker) on CodePen.

Больше информации!

При исследовании данного материала я нашла отличную статью Хейдона Пикеринга по этой теме, названную «Количественные выражения», и ещё примеры Лии Веру! В комментариях к статье Хейдона Пол Айриш отмечает, что это более медленный способ выборки элементов, так что используйте его с осторожностью.

P.S. Это тоже может быть интересно:

CSS3 | Селекторы элементов одного уровня

Селекторы элементов одного уровня

Последнее обновление: 21.04.2016

Селекторы элементов одного уровня или смежных элементов позволяют выбрать элементы, которые находятся на одном уровне вложенности. Иногда такие элементы еще называют сиблинги (siblings) или сестринскими элементами. Например:

<body>
	<h3>Заголовок</h3>
	<div>
		<p>Текст первого блока</p>
	</div>
	<div>
		<p>Текст второго блока</p>
	</div>
</body>

Здесь элементы h3 и оба блока div являются смежными, так как находятся на одном уровне. А элементы параграфов и заголовок h3 не являются смежными, так как параграфы вложены в блоки div.

Чтобы стилизовать первый смежный элемент по отношению к определенному элементу, используется знак плюса +:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			h3+div { color: red; }
        </style>
    </head>
    <body>
		<h3>Заголовок</h3>
		<div>
			<p>Текст первого блока</p>
		</div>
		<div>
			<p>Текст второго блока</p>
		</div>
    </body>
</html>

Селектор h3+div позволяет определить стиль (в данном случае красный цвет текста) для блока div, который идет непосредственно после заголовка h3:

Причем этот селектор будет стилизовать блок div, если он будет идти непосредственно после заголовка. Если же между заголовком и блоков div будет находиться еще какой-либо элемент, то к нему не будет применяться стиль, например:

<h3>Заголовок</h3&gt

<p>Элемент между заголовком и блоком div</p>

<div>
	<p>Текст первого блока</p>
</div>

Если нам надо стилизовать вообще все смежные элементы одного уровня, неважно непосредственно идут они после определенного элемента или нет, то в этом случае вместо знака плюса необходимо использовать знак тильды «~»:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			h3~div { color: red; }
        </style>
    </head>
    <body>
		<h3>Заголовок</h3>
		<p>Аннотация</p>
		<div>
			<p>Текст первого блока</p>
		</div>
		<div>
			<p>Текст второго блока</p>
		</div>
    </body>
</html>