Css odd even: :nth-of-type() — CSS: Cascading Style Sheets

Содержание

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

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

Синтаксис ?

Селектор:nth-of-type(odd | even | <число> | <выражение>) {...}

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

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

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

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

Табл. 1. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Первый элемент.
55Пятый элемент.
2n2, 4, 6, 8, 10Все чётные элементы, аналог значения even.
2n+11, 3, 5, 7, 9Все нечётные элементы, аналог значения odd.
3n+22, 5, 8, 11, 14
-n+33, 2, 1
5n-23, 8, 13, 18, 23
even2, 4, 6, 8, 10Все чётные элементы.
odd1, 3, 5, 7, 9Все нечётные элементы.
Пример

<!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="images/left-knight.gif" alt="">
   /<img src="images/right-knight.gif" alt=""></p>
   <h2>Исторический турнир</h2>
 </body>
</html>

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

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

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные    

?

Internet ExplorerChromeOperaSafariFirefox
949. 53.13.5

AndroidFirefox MobileOpera MobileSafari Mobile
2.119.53.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

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

Как использовать четные и нечетные правила CSS для создания привлекательных таблиц в WordPress

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

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

Введение в правила CSS для четных и нечетных чисел

Правила CSS для четных и нечетных значений позволяют нацеливаться на очень определенные элементы.

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

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

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

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

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

Как работают четные и нечетные правила CSS на практике

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

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

.

Если бы мы хотели применить к нему четные и нечетные правила, вот пример того, как выглядел бы CSS:

 tr:nth-child(четный) {фон: #CCC}
tr: nth-ребенок (нечетный) {фон: #4D4D4D} 

Здесь tr относится к элементам HTML для каждой строки в таблице. Приведенный выше код установит белый фон для всех четных строк и серый для нечетных чисел, например:

.

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

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

.
 col:nth-child(even) {фон: #CCC}
col:nth-child(нечетный) {фон: #4D4D4D} 

Вот как будет выглядеть результат:

Как мы упоминали ранее, вы можете использовать четные и нечетные правила, чтобы ориентироваться практически на любой элемент. Ключевым моментом является то, что он должен содержать подэлементы, такие как строки или столбцы, иначе селектор не будет знать, на какие из них ориентироваться. Списки, например, включают 9 0045 li элементов HTML для каждой записи. Вот пример:

 <ул>
  • Первый элемент.
  • Второй элемент.
  • Третий элемент.
  • Четвертый элемент.
  • В этом случае вы хотите, чтобы ваши селекторы четных и нечетных были нацелены на элементы li , поэтому ваш CSS должен выглядеть так:

     li:nth-child(четный) {фон: #CCC}
    li:nth-ребенок (нечетный) {фон: #4D4D4D} 

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

    .
    • Первый элемент.
    • Второй элемент.
    • Третий элемент.
    • Четвертый элемент.

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

    Как воспроизвести четные и нечетные правила CSS с помощью Divi

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

    Более того, вы получаете доступ к мощным функциям настройки для персонализации этих элементов.

    Когда дело доходит до ценовых таблиц, например, очень легко воспроизвести эффекты четных и нечетных правил CSS без использования кода благодаря Divi. Вот пример базовой таблицы цен, которую мы составили с помощью Divi Builder:

    Теперь предположим, что мы хотим применить разные цвета для каждого столбца, чтобы добавить небольшой контраст в таблицу. Используя четные и нечетные правила CSS, мы в конечном итоге нацелились бы на целые столбцы одним цветом, что выглядело бы ужасно. С Divi вы можете настроить определенные разделы, на которые хотите настроить таргетинг. Давайте попробуем добавить синий фон в заголовки для первой и третьей колонок. Для этого найдите модуль таблицы цен на странице, которую вы редактируете, и нажмите его  Настройки модуля  9Кнопка 0046:

    Теперь найдите конкретный столбец, на который вы хотите настроить таргетинг, и еще раз нажмите кнопку его настроек:

    Если вы перейдете на вкладку Дополнительно , вы найдете поле под названием Заголовок ценообразования. Вы можете изменить цвет фона этого раздела с помощью простой строки CSS:

     фон: #0C71C3; 

    Вот как выглядит наша таблица:

    Если применить те же изменения к Developer  , вы в основном реализовали четные и нечетные правила для этой конкретной строки:

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

    Для этого перейдите в разделы настроек столбца, который вы хотите изменить. В этом примере мы снова настроим таргетинг на столбец Basic . Если вы прокрутите экран основных настроек вниз, вы найдете текстовый редактор со списком функций, которые вы видели ранее:

    .

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

    .

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

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

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

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

    Заключение

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

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

    У вас есть вопросы о том, как использовать Divi для воспроизведения четных и нечетных правил в WordPress? Давайте поговорим о них в разделе комментариев ниже!

    Миниатюра статьи от Ket4up / Shutterstock.com

    [css] Как указать n-е число, например, нечетное, четное или равномерное. «:nth-child()» и «:nth-last-child»

    css

    2021.09.02

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

    Содержание

    1. Применение стилей к четным и нечетным числам
      1. Красный цвет фона для четных чисел
      2. Показывать нечетные числа с красным цветом фона
    2. Применение стиля к n-му
      1. Отображать третий цвет фона спереди красным.
      2. Третий цвет фона сзади — красный.
    3. Применить стили до n-го спереди и до n-го сзади
      1. Красный цвет фона для первых трех.
      2. Цвет фона четвертого и последующих предметов спереди будет красным.
      3. Цвет фона третьего и последующих будет красным.
    4. Сводка по использованию :nth-child() и :nth-last-child

    Применение стилей к четным и нечетным числам

    Красный цвет фона для четных чисел

    html

    <ул>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1

    2

    3

    4

    5

    6

    7

    8

    10 3

    9

    3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS

    .example1 li:nth-child(2n){ фон:#f00; }

    .example1 li:nth-child(2n){

    background:#f00;

    }

    Результат

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    Другой способ указать четное число — использовать :nth-child(even).
    CSS, который выражает то же самое, что и выше, в математическом выражении, будет :nth-child(2n) (кратно 2).

    Показывать нечетные числа с красным цветом фона

    html

    <ул>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1

    2

    3

    4

    5

    6

    7

    8

    10 3

    9

    3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS

    .example1 li:nth-child(2n+1){ фон:#f00; }

    .example1 li:nth-child(2n+1){

    background:#f00;

    }

    Результат

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    Другой способ указать нечетное число — использовать :nth-child(odd).
    в математическом выражении будет :nth-child(2n+1) (первое из кратных 2).

    Применить стиль к n-му

    Отобразить третий цвет фона спереди красным.

    HTML

    <ул>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1

    2

    3

    4

    5

    6

    7

    8

    10 3

    9

    3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS

    .example1 li:nth-child(3){ фон:#f00; }

    .example1 li:nth-child(3){

    background:#f00;

    }

    Результат

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS для представления третьего спереди в виде математического выражения: nth-child(3).

    Третий цвет фона сзади — красный.

    HTML

    <ул>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1

    2

    3

    4

    5

    6

    7

    8

    10 3

    9

    3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS

    .example1 li:nth-child(3){ фон:#f00; }

    .example1 li:nth-child(3){

    background:#f00;

    }

    Результат

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    Чтобы считать сзади, используйте :nth-last-child вместо :nth-child.
    CSS, представляющий третью позицию сзади в виде формулы: nth-last-child(3).

    Применить стили до n-го спереди и до n-го сзади

    Красный цвет фона для первых трех.

    HTML

    <ул>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1

    2

    3

    4

    5

    6

    7

    8

    10 3

    9

    3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS

    .example1 li:n-й ребенок (-n+3){ фон:#f00; }

    .example1 li:nth-child(-n+3){

    background:#f00;

    }

    Результат

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS для выражения До трех спереди в виде математического выражения: nth-child(-n+3).

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

    HTML

    <ул>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1

    2

    3

    4

    5

    6

    7

    8

    10 3

    9

    3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS

    .example1 li:nth-child(n+4){ фон:#f00; }

    .example1 li:nth-child(n+4){

    background:#f00;

    }

    Результат

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS, который выражает четвертую часть спереди и далее в виде формулы: nth-child(n+4).

    Цвет фона третьего и последующих будет красным.

    HTML

    <ул>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1

    2

    3

    4

    5

    6

    7

    8

    10 3

    9

    3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS

    .example1 li:n-последний-потомок(-n+3){ фон:#f00; }

    .example1 li:nth-last-child(-n+3){

    background:#f00;

    }

    Результат

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS, который представляет третий спереди в виде формулы: nth-last-child(-n+3).

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

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