Порядковый номер элемента css: Псевдо-класс :nth-child(n) | CSS селектор — Вебджем.рф

:nth-of-type() ⚡️ HTML и CSS с примерами кода

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

Псевдоклассы

:active
:any-link
:blank
:checked
:current()
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:local-link
:not()
:nth-child()
:nth-col()
:nth-last-child()
:nth-last-col()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:target-within
:user-invalid
:valid
:visited
:where()

Синтаксис

/* Выбирает каждый четвёртый элемент <p>
   среди любой группы соседних элементов.  */
p:nth-of-type(4n) {
  color: lime;
}

Значения

odd: Все нечётные номера элементов.
even: Все чётные номера элементов.
<число>: Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>: Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с

1.

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

Табл. 1. Результат для различных значений псевдокласса

Значение	Номера элементов	Описание
`1`	1	Первый элемент, является синонимом псевдокласса `:first-of-type`.
`5`	5	Пятый элемент.
`2n`	2, 4, 6, 8, 10,…	Все чётные элементы, аналог значения `even`.
`2n+1`	1, 3, 5, 7, 9,…	Все нечётные элементы, аналог значения `odd`.
`3n`	3, 6, 9, 12, 15,…	Каждый третий элемент.
`3n+2`	2, 5, 8, 11, 14,…	Каждый третий элемент, начиная со второго.
`n+4`	4, 5, 6, 7, 8,…	Все элементы, кроме первых трёх.
`-n+3`	3, 2, 1	Первые три элемента.
`5n-2`	3, 8, 13, 18, 23,…	—
`even`	2, 4, 6, 8, 10,…	Все чётные элементы.
`odd`	1, 3, 5, 7, 9,…	Все нечётные элементы.

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

:nth-of-type(n + 2):nth-of-type(-n + 5) {
  /* … */
}

Спецификации

Selectors Level 4
Selectors Level 3

Примеры

Пример 1

HTMLCSSРезультат

<div>
  <div>Этот элемент не учитывается.</div>
  <p>Первый параграф.</p>
  <p>Второй параграф.</p>
  <div>Этот элемент не учитывается.  </div>
  <p>Третий параграф.</p>
  <p>Четвёртый параграф.</p>
</div>

/* Нечётные параграфы */
p:nth-of-type(2n + 1) {
  color: red;
}
/* Чётные параграфы */
p:nth-of-type(2n) {
  color: blue;
}
/* Первый параграф */
p:nth-of-type(1) {
  font-weight: bold;
}

Пример 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>nth-of-type</title>
    <style>
      img:nth-of-type(2n + 1) {
        float: left;
      }
      img:nth-of-type(2n) {
        float: right;
      }
    </style>
  </head>
  <body>
    <p>
      <img src="image/left-knight.gif" alt="" />
      <img src="image/right-knight.gif" alt="" />
    </p>
    <h2>Исторический турнир</h2>
  </body>
</html>

В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому.

См.

также

:nth-child
:nth-last-of-type

Ссылки

Псевдо-класс :nth-of-type() ^{MDN (рус.)}

Количественные CSS селекторы / Хабр

Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?
Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.

Динамичный контент

Респонсив дизайн обычно ассоцируется с одной переменной — пространством. Когда мы тестируем респонсив сетки, мы берем какой-то объем контента и смотрим, сколько места он займет, как это выглядит и куда он влазит, а куда нет. То есть, контент считается константой, а пространство — переменной.

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

Точно так же, как посетители сайта могут пользоваться множеством устройств с разными размерами экранов, ваши контент-менеджеры и редакторы могут добавлять или удалять контент. У них даже для этого целые CMS есть. Именно поэтому дизайны страниц в фотошопе потеряли свою актуальность — в них всегда фиксированная ширина экрана и всегда фиксированный контент.

В этой статье я опишу технику создания CSS, лишенного проблем с количеством (подсчётом) элементов. Достигается это за счёт специально оформленных селекторов. Я буду применять их в контесте решения классической проблемы: как разделить вёрстку элементов в горизонтальном меню сайта, когда в нём мало и много элементов. Например, как добиться того, что при 6 и более пунктах меню элементы имели стиль display: inline-block, а при меньшем количестве — display: table-cell.

Я не буду использовать шаблонизацию или js, мне даже не понадобятся прописывать классы у элементов меню. Техника использования только CSS селекторов соответствует принципу разделения интересов, согласно которому, контент (HTML) и отображение (CSS) имеют ясно обозначенные роли. Разметка — это работа CSS и, по возможности, одного только CSS.

Демо доступно на CodePen и еще будет упоминаться по ходу статьи.

Чтобы упростить понимание, я буду использовать картинки с кальмарами вместо HTML тегов. Зеленые кальмары будут за элементы, которые попадают под конкретный селектор, красные — за те, которые не попадают, а серые будут значить, что элемента не существует.

Счёт

Чтобы узнать количество элементов, их нужно посчитать.

Прим. пер

Капитан

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

Считаем до одного

Селектор :only-child срабатывает на элементах, которых всегда одна штука. По сути, это позволяет нам «применить стили ко всем дочерним элементам конкретного элемента, если суммарно их ровно 1». Это единственный простой селектор, который можно описать как «подсчитывающий» (кроме, конечно, похожего на него :only-of-type).

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

button { 
  font-size: 1.25em;
}
button:only-of-type {
  font-size: 2em;
}

Важно понимать, что очередность строк здесь имеет ключевое значение. Кроме этого, полезно видеть этот код с точки зрения селекта «меньше-чем-два»:

Аналогично, мы теперь можем сделать селект «больше-чем-один», используя отрицание.

/* "больше-чем-один" будут иметь уменьшенный размер шрифта */
button {
  font-size: 2em;
}
button:not(:only-of-type) {
  font-size: 1.25em;
}

N элементов

Применять стили, основываясь на «больше-чем-один» и «меньше-чем-два» это ловкий трюк, но нам нужен более гибкий инструмент, позволяющий оперировать с любым числом. Мы хотим использовать селекты “больше или равно N” для любого N. Кроме этого, хочется иметь селект «ровно 745» или «суммарно ровно 6».

Для этого у нас есть селектор :nth-last-child(n), в который мы параметром передаем любое число. Он позволяет отсчитать столько-то элементов назад от конца списка. Например, :nth-last-child(6) выберет элемент, который является шестым с конца среди своих соседних элементов.

Всё становится интереснее, когда мы совмещаем :nth-last-child(6) и :first-child, в результате получая все элементы, которые являются шестыми с конца и при этом первыми с начала.

li:nth-last-child(6):first-child {
  /* зеленый кальмар */
}

Если такой элемент существует, это будет значить, что у нас ровно 6 элементов. Таким образом, я написал CSS код, который может сказать, сколько элементов я вижу перед собой.

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

Если вы не знакомы с этим комбинатором, то объясняю, ~ li в селекте li:nth-last-child(6):first-child ~ li значит «любой li, который идёт после li:nth-last-child(6):first-child». В нашем случае, элементы будут иметь зеленый цвет шрифта, если их ровно 6 штук.

li:nth-last-child(6):first-child, 
li:nth-last-child(6):first-child ~ li {
  color: green;
}

Больше или равно 6

Селектать фиксированное количество, будь то 6, 19 или 653 — не очень-то полезно, так как подобная необходимость очень редка. Это как в media queries — не очень удобно использовать фиксрованную ширину вместо min-width или max-width:

@media screen and (width: 500px) {
  /* стили для ширины вьюпорта ровно в 500px */
}

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

Вопрос в том, как сделать такой селектор? и это вопрос смещений.

Параметр n+6

Селектор :nth-child() может принимать параметром не только число, но и формулу “n + [число]”. Например, :nth-child(n+6) будет применён ко всем элементам, начиная с шестого.

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

Чтобы обойти эту проблему, нам нужно создать такой селект, который выделит все элементы, кроме последних пяти. Используя обратный к :nth-child(n+6) селект :nth-last-child(n+6) мы сможем выделить все элементы «от с шестого с конца и до самого первого с начала».

li:nth-last-child(n+6) {
  /* здесь стили */
}

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

Если же в списке шесть или больше элементов, нам остаётся прибавить к селекту оставшиеся пять элементов. Это легко — если элементов больше шести, то срабатывает условие nth-last-child(n+6), и комбинируя его с «~» мы сможем поселектать все нужные нам элементы.

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

li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
  /* здесь стили */
}

Разумеется, тут может быть любое положительное целое число, даже 653,279.

Меньше или N

Как и в предыдущем примере с :only-of-type, селектор можно использовать в обе стороны, и как «больше или равно N» и как «меньше или равно N». Какой вариант вы будете использовать? Зависит от того, какую сетку вы будете считать основной.
В случае «Меньше или N» мы берем n с минусом и добавляем условие :first-child.

li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  /* здесь стили */
}

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

nth-child против nth-of-type

Заметьте, что в предыдущих примерах я использовал :nth-child() и :nth-last-child(), а не :nth-of-type() с :nth-last-of-type(). Так как я селектал теги <li> и правильными потомками <ul> могут быть только они, :last-child() и :last-of-type() оказываются одинаково результативны.

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

<div>
  <p>...</p>
  <p>...</p>
  <blockquote>...</blockquote>
  <figure>...</figure>
  <p>...</p>
  <p>...</p>
</div>

.container > :nth-last-child(n+3),
.container > :nth-last-child(n+3) ~ * {
  /* здесь стили */
}

(Обратите внимание, чтобы не привязываться к тегам, я использую универсальный селектор. :last-child(n+3) ~ *. В этом случае, он обозначает «любой элемент любого тега, следующий за :last-child(n+3).»

С другой стороны, преимущество :nth-last-of-type() в том, что вы можете селектать элементы с одним тегом среди множества других соседних. Например, можно посчитать количество тегов <p>, несмотря на то, что они в одной куче с <div> и <blockquote>.

<div>
  <div>...</div>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <blockquote>...</blockquote>
</div>

p:nth-last-of-type(n+6),
p:nth-last-of-type(n+6) ~ p {
  /* здесь стили */
}

Поддержка браузерами

Все используемые в статье селекторы CSS2.1 и CSS3 поддерживаются в Internet Explorer 9 и выше, а так же все современные мобильные и десктопные браузеры.

Internet Explorer 8 неплохо поддерживает большинство селектов, но задуматься о полифилле на js не помешает. В качестве альтернативы, можно расставить специальные классы для старых версий IE и приписать их к своим селекторам. В случае с навигационным меню, код будет выглядеть примерно так:

nav li:nth-last-child(n+6),
nav li:nth-last-child(n+6) ~ li, 
.lt-ie9 nav li {
  display: inline-block;
  /* и т.д. */
}

В реальном мире

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

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

Поздравляю, теперь в вашем CSS арсенале есть умение оперировать количеством элементов.

Контент-независимый дизайн

Респонсив дизайн решает одну важную проблему: он позволяет комфортно расположить один и тот же контент на множестве разных устройств. Было бы неприемлемо видеть разный контент только потому, что у тебя экран неправильного размера. Так же и неприемлемо диктовать дизайнеру, под сколько пунктов меню должен быть заточен сайт. «Не рисуй так, у нас вся сетка поедет, если будет столько элементов».

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

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

box-ordinal-group — CSS: Каскадные таблицы стилей

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

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

Предупреждение: Это свойство исходного черновика модуля CSS Flexible Box Layout. Он был заменен в спецификации. См. flexbox для получения информации о текущем стандарте.

Свойство CSS box-ordinal-group назначает дочерние элементы flexbox порядковой группе.

 /* <целочисленные> значения */
коробка-порядковая-группа: 1;
порядковая группа ящиков: 5;
/* Глобальные значения */
порядковая группа ящиков: наследовать;
порядковый номер группы: начальный;
порядковая группа ящиков: не установлена;

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

Свойство box-ordinal-group указывается как любое положительное .

Initial value	`1`
Applies to	children of box elements
Inherited	no
Computed value	as specified
Animation type	дискретный

 порядковая-группа ящиков =
  <целое число>

Пример базового использования

В более раннюю версию спецификации была включена box-ordinal-group , позволяющая изменить порядок отображения flex-потомков внутри flex-контейнера:

 article:nth-child(1) {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  коробка-порядковая-группа: 2;
}
статья: n-й ребенок (2) {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  коробка-порядковая-группа: 1;
}

Современный эквивалент flexbox: order .

Не является частью какого-либо стандарта.

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.

гибкий
гибкая основа
гибкий рост
гибкий термоусадочный

Последнее изменение: 3 ноября 2022 г. , участниками MDN

css — flexbox box-ordinal-group в ячейках таблицы

Задай вопрос

спросил 9 лет, 2 месяца назад

Изменено 9 лет, 2 месяца назад

Просмотрено 2к раз

Я пытаюсь изменить порядок ячеек таблицы, используя flexbox и box-ordinal-group (вариант использования: другой порядок с помощью медиа-запроса на мобильном телефоне для конкретной таблицы без дублирования кода).

Я бы подумал, что установка ячеек таблицы на display: block и таблицы на display: flex (и различных версий с префиксом производителя) поможет, но не тут-то было.

Мне интересно, это tr / tbody вокруг td s, которые вырываются из flexbox.

 <таблица>
    
        Ячейка 1
        Ячейка 2
        Ячейка 3

 таблица {
    дисплей: -webkit-box;
    -webkit-flex-direction: столбец;
    дисплей: -moz-box;
    -moz-flex-direction: столбец;
    отображение: -ms-flexbox;
    -ms-flex-direction: столбец;
    отображение: -webkit-flex;
    дисплей: гибкий;
    flex-направление: столбец;
}
тд {
    дисплей: блок;
}
.cell1 {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-порядок: 3;
    -вебкит-порядок: 3;
    порядок: 3;
}

Вот пример, показывающий, что это работает на 9Отображение 0016: таблица ed

, но не

 .Навигация по записям
Html карта: Тег | htmlbook.ru
Оптимизация текста: пишем ТЗ для копирайтера — SEO на vc.ru
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  

  
Рубрики
Css
Html
Js
Адаптивный сайт
Верстка
Идеи
С чего начать
Советы
Шаблоны
Разное
 © Компания  Вебджем.рф  2009 - 2024 | Все права защищены.