Css even odd: html — How can I style even and odd elements? - Блог сумасшедшего сисадмина

Содержание

Псевдокласс :nth-child | CSS | WebReference

Содержание
- Синтаксис
- Значения
- Пример
- Спецификация
- Браузеры

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

Синтаксис

Селектор:nth-child(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. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-child.
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-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

:nth-child(n+2):nth-child(-n+5) { … }

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>nth-child</title> <style> table { width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячейками */ } tr:nth-child(2n) { background: #f0f0f0; /* Цвет фона */ } tr:nth-child(1) { background: #666; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <table border=»1″> <tr> <td> </td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Камни</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> </body> </html>

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис.

1).

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

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

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

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

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

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

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

Браузеры


9	12	1	9.5	3.1	3.5


2.1	1	9.5	3.1

Браузеры

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

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

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

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

См. также

:nth-child()
:nth-of-type()
Нумерованные списки
Псевдокласс :nth-last-child
Псевдокласс :nth-last-of-type
Псевдокласс :nth-of-type
Псевдоклассы в CSS

Рецепты

Как сделать нумерацию русскими буквами?

Практика

Зебра в таблице

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

Наведение CSS с nth-child с определенными ячейками данных не работает [html, css, html-table]

Я уже видел другой вопрос, похожий на этот, который показал, как добавить наведение к селекторам с помощью nth-child. И, похоже, это работает, но не тогда, когда я пытаюсь настроить таргетинг только на определенные ячейки (в более позднем примере класс «статус» должен быть другого цвета и иметь эффекты наведения).

tr {
  color: white;
}

tr:nth-child(even) {
    background-color: red;
}
tr:nth-child(odd) {
    background-color: blue;
}

.status tr:nth-child(even) {
    background-color: yellow;
}
.status tr:hover:nth-child(even){
    background-color: white;
}
.status tr:nth-child(odd) {
    background-color: green;
}
.status tr:hover:nth-child(odd){
    background-color: orange;
}

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td>available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td>available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td>available</td>
</tr>
</table>

<p>The "available" cells should be either yellow or white, and when hovered green and orange.  Other cells need to be either red or blue.</p>

«Доступные» ячейки должны быть либо желтыми, либо белыми, а при наведении — зелеными или оранжевыми. Другие ячейки должны быть либо красными, либо синими.

html css html-table

person Marked as Duplicate schedule 18.06.2017 source источник

Ответы (5)

arrow_upward
1
arrow_downward

tr:nth-child(odd) .status {
    background-color: yellow;
}
tr:nth-child(odd) .status:hover {
    background-color: green;
}
tr:nth-child(even) .status {
    background-color: white;
}
tr:nth-child(even) .status:hover {
    background-color: orange;
}
tr:nth-child(odd) .status {
    background-color: yellow;
}
tr:nth-child(odd) . status:hover {
    background-color: green;
}
tr:nth-child(even) .status {
    background-color: white;
}
tr:nth-child(even) .status:hover {
    background-color: orange;
}
tr:nth-child(even) {
  background-color: red;
}
tr:nth-child(odd) {
  background-color: blue;
}

person gauravmuk schedule 18.06.2017

arrow_upward
1
arrow_downward

Смотри ниже. Я переместил .status в конец определения.

tr {
  color: white;
}

tr:nth-child(even) {
    background-color: red;
}
tr:nth-child(odd) {
    background-color: blue;
}

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:hover:nth-child(even) .status {
    background-color: green;
}
tr:nth-child(odd) .status  {
    background-color: white;
    color: black;
}
tr:hover:nth-child(odd) . status {
    background-color: orange;
}

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td>available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td>available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td>available</td>
</tr>
</table>

<p>The "available" cells should be either yellow or white, and when hovered green and orange. Other cells need to be either red or blue.</p>

person Gerard schedule 18.06.2017

arrow_upward
0
arrow_downward

Как упоминалось в предыдущем ответе, ваше наведение должно идти после селектора nth-child, потому что вам нужно определить элемент, который вы хотите навести первым. Также ваш класс .status должен быть в конце селектора, потому что он является потомком класса tr.

tr {
  color: white;
}

tr:nth-child(even) {
  background-color: red;
}
tr:nth-child(odd) {
  background-color: blue;
}

tr:nth-child(even) .status  {
  background-color: yellow;
}
tr:nth-child(even):hover .status {
  background-color: white;
}
tr:nth-child(odd) .status {
  background-color: green;
}
tr:nth-child(odd):hover .status {
  background-color: orange;
}

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td>available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td>available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td>available</td>
</tr>
</table>

person WizardCoder schedule 18. 06.2017

arrow_upward
0
arrow_downward

ты сделал ошибку. Вы должны использовать это

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:nth-child(even):hover .status{
    background-color: white;
}
tr:nth-child(odd) .status {
    background-color: green;
}
tr:nth-child(odd):hover .status {
    background-color: orange;
}

Используйте это, и вы получите решение.

tr {
  color: white;
}

tr:nth-child(even) {
    background-color: red;
}
tr:nth-child(odd) {
    background-color: blue;
}

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:nth-child(even):hover .status{
    background-color: white;
}
tr:nth-child(odd) .status {
    background-color: green;
}
tr:nth-child(odd):hover .status {
    background-color: orange;
}

<table border="1">
<tr>
  <td>blue</td>
  <td>big</td>
  <td>available</td>
</tr>
<tr>
  <td>yellow</td>
  <td>medium</td>
  <td>available</td>
</tr>
<tr>
  <td>blue</td>
  <td>small</td>
  <td>available</td>
</tr>
</table>

<p>The "available" cells should be either yellow or white, and when hovered green and orange.  Other cells need to be either red or blue.</p>

person Enamul Haque schedule 18.06.2017

arrow_upward
-1
arrow_downward

ты сделал ошибку. Вы должны использовать это

tr:nth-child(even) .status {
    background-color: yellow;
}
tr:nth-child(even):hover .status{
    background-color: white;
}
tr:nth-child(odd) .status {
    background-color: green;
}
tr:nth-child(odd):hover .status {
    background-color: orange;
}

Используйте это, и вы получите решение.

person Enamul Haque schedule 18.06.2017

заливка и обводка • Про CSS

Содержание:: fill; fill-rule; fill-opacity; stroke; stroke-width; stroke-linecap; stroke-linejoin; stroke-dasharray; stroke-dashoffset; stroke-opacity

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

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

В качестве заливки и обводки можно задавать none, цвета, ключевые слова (currentColor и transparent), а также градиенты и паттерны.

fill

Заливка элемента.

Возможные значения: none, ключевые слова, цвета, паттерны и градиенты. Значение по умолчанию — black.

<svg>
  <defs>
    <symbol>
      <rect/>
    </symbol>
    <linearGradient
      x1="0%" y1="0%"
      x2="0%" y2="90%"
    >
      <stop offset="0%" stop-color="yellowgreen" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>
  <use xlink:href="#s-rect"
    x="20" y="20"
    fill="hsla(348, 83%, 47%,. 3)"/> <!-- HSLA -->
  <use xlink:href="#s-rect"
    x="110" y="20"
    fill="rgb(255, 215, 0)"/> <!-- RGB -->
  <use xlink:href="#s-rect"
    x="20" y="110"
    fill="url(#g-green)"/> <!-- Градиент -->
  <use xlink:href="#s-rect"
    x="110" y="110"
    fill="skyblue"/> <!-- Цвет по названию -->
</svg>

fill-rule

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

Возможные значения: nonzero, evenodd

fill-rule="nonzero"

fill-rule="evenodd"

fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк, смотреть в FF).

<!-- ... -->
<use xlink:href="#s-rect"
  x="20" y="20"
  fill="url(#g-red)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="50" y="50"
  fill="hsl(50, 100%, 50%)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="80" y="80"
  fill="url(#g-green)" fill-opacity=".5"/>
<!-- ... -->

stroke

Цвет обводки. Значения по умолчанию нет.

<svg>
  <rect x="20" y="20"
    fill="none"
    stroke="yellowgreen"/>
</svg>

stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.

<svg>
  <rect x="50" y="50"
    fill="none" stroke="gold"
    stroke-width="10"/>
  <rect x="20" y="20"
    fill="none" stroke="yellowgreen"
    stroke-width="10%"/>
</svg>

stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt, round, square. Значение по умолчанию: butt.

<!-- ... -->
  <use xlink:href="#s-path" stroke="orangered" y="20"
    stroke-linecap="butt"/>
  <use xlink:href="#s-path" stroke="olivedrab" y="85"
    stroke-linecap="round"/>
  <use xlink:href="#s-path" stroke="steelblue" y="150"
    stroke-linecap="square"/>
<!-- ... -->

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter, round, bevel. Значение по умолчанию: miter.

<!-- ... -->
  <use xlink:href="#s-corner" stroke="orangered" y="0"
    stroke-linejoin="miter"/>
  <use xlink:href="#s-corner" stroke="olivedrab" y="80"
    stroke-linejoin="round"/>
  <use xlink:href="#s-corner" stroke="steelblue" y="160"
    stroke-linejoin="bevel"/>
<!-- ... -->

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Примеры разных пунктирных линий:

<svg>
  <path d="M 20 20 h 260"
    stroke="purple" stroke-width="1"
    stroke-dasharray="1" />
  <path d="M 20 40 h 260"
    stroke="mediumspringgreen" stroke-width="15"
    stroke-dasharray="1 3" />
  <path d="M 20 60 h 260"
    stroke="orangered" stroke-width="1"
    stroke-dasharray="5%" />
  <path d="M 20 80 h 260"
    stroke="green" stroke-width="1"
    stroke-dasharray="1 5" />
  <path d="M 20 100 h 260"
    stroke="steelblue" stroke-width="1"
    stroke-dasharray="2 7 6" />
  <path d="M 20 120 h 260"
    stroke="orange" stroke-width="5"
    stroke-dasharray="5" />
  <path d="M 20 140 h 260"
    stroke="mediumseagreen" stroke-width="1"
    stroke-dasharray="12% 5%" />
</svg>

Используя обводку и простые фигуры можно получить удивительные вещи:

Также stroke-dasharray интересно сочетается с анимацией:

stroke-dashoffset

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

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

<svg>
  <g fill="none"
    stroke-width="15"
    stroke-dasharray="25% 110%"
    transform="rotate(72 135 135)">
    <circle r="115" cx="135" cy="135"
      stroke="crimson"/> <!-- Красная обводка без смещения -->
    <circle r="115" cx="135" cy="135"
      stroke="orangered"
      stroke-dashoffset="25%"/> <!-- Оранжевая обводка смещена на 25% -->
    <circle r="115" cx="135" cy="135"
      stroke="gold"
      stroke-dashoffset="50%"/> <!-- Желтая обводка смещена на 50% -->
  </g>
</svg>

Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.

Для полноценного просмотра воспользуйтесь браузерами на Webkit. Ссылка на полную версию.

Для перезапуска нажмите Rerun.

Несколько вдохновляющих ссылок про анимацию на stroke-dashoffset:

How SVG Line Animation Works
Animated line drawing in SVG
SVG Drawing Animation

stroke-opacity

Прозрачность обводки. Задаются значения от 0.0 до 1.0.

<svg>
  <g fill="none"
    stroke-width="15">
    <circle r="40" cx="60" cy="60"
      stroke="crimson"
      stroke-opacity=".7"/>
    <circle r="55" cx="100" cy="100"
      stroke="orangered"
      stroke-opacity=".5" />
    <circle r="40" cx="140" cy="140"
      stroke="gold"
      stroke-opacity=".25"/>
  </g>
</svg>

Анимация обводки позволяет получить совершенно удивительные вещи. Правда, я в своих примерах использовала CSS (и это демо не играет в Firefox) и SVG-анимацию, которая работает таки везде, но задается странно, длинно и неудобно. Думаю, что оптимальнее всего для анимации SVG использовать JavaScript-библиотеки.

Ссылки по теме:: w3.org/TR/SVG

Метки:: SVG

←SVG-pathSVG-иконки→

Наверх

Помощь с четным/нечетным псевдоклассом — HTML и CSS — Форумы SitePoint

swani 24 апреля 2017 г., 17:37

Привет,

Я не очень часто использовал такой класс и явно что-то упускаю. У меня есть сайт с 5 сотрудниками на нем. У каждого сотрудника есть div, внутри которого находится вся его информация. Я хотел бы чередовать цвета фона, чтобы отделить их друг от друга. Я попытался использовать «:nth-child(odd)», но он нацелен либо на все 5 из них, либо ни на один. Итак, я попробовал «:nth-child(4)», и он нацелен на 2-й из 5. Я не понимаю. Я могу опубликовать HTML-код, если кто-то предпочитает, но я подумал, что было бы полезнее прокомментировать снимок экрана инспектора в верхней части сайта (см. Приложение).

чет-нечет-нечет.png1700×975 306 КБ

Надеюсь, это что-то действительно глупое, чего я просто не замечаю. Заранее благодарю за любую помощь.

Свани

СамА74 24 апреля 2017 г., 17:50

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

свани 24 апреля 2017 г., 18:25

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

Я думал, что использование .staff:nth-child(odd) будет нацелено на 1-й, 3-й и 5-й экземпляры элементов с классом .staff независимо от того, где они появились на странице. Почему это не так? Как бы я написал декларацию, которая делает это?

Кроме того, я просмотрел элементы div .staff , и там нет других элементов с этим классом. Это только те 5, которые я выделил. Я даже вытащил весь div .listing-page и поместил его в локальный файл, так что я просто работаю над этой частью документа, и поведение такое же.

Я также пробовал это: .listing-page > .staff:nth-child(нечетный)

Тот же результат.

СамА74 24 апреля 2017 г., 18:34

свани:

Почему это не так?

Вы используете nth-child , первый или второй дочерний элемент по-прежнему является первым или вторым дочерним элементом независимо от класса. Класс в селекторе только фильтрует, какие элементы выбираются, он не меняет количество или порядок элементов в родительском элементе.
Я бы структурировал html по-другому, возможно, используя элемент списка.
У меня был бы заголовок и нумерация страниц вне родительского элемента.
Разделители могут быть псевдоэлементами ::after или помещены в дочерние элементы.

свани 24 апреля 2017 г., 19:00

ОК. Ну, это ясно, что здесь происходит. Рассмотрим этот тест: