Содержание

Псевдо-класи CSS

first-child

last-child

nth-child

Псевдоклас :nth-child(an + b) вибирає елементи в колекції сусідів за номером, вказаним у дужках, за допомогою циклу an + b `, який дозволяє задати правило для послідовності елементів.

.someitem:nth-child(5){
margin-bottom: red
}

even

Для вибору всіх парних елементів можна використовувати формулу 2n або її псевдонім — значення even, зарезервоване слово.

.list-item:nth-child(2n) {
  background-color: orange;
}

/* Аналогічно використовуючи псевдонім */
.list-item:nth-child(even) {
  background-color: orange;
}

odd

Для вибору непарних елементів можна використовувати формулу 2n + 1 або її псевдонім — значення odd, зарезервоване слово.

.list-item:nth-child(2n + 1) {
  background-color: orange;
}

/* Аналогічно використовуючи псевдонім */
.list-item:nth-child(odd) {
  background-color: orange;
}

not()

дозволяє вибрати всі елементи, що не підходять під критерій. Критерій вказується у вигляді простого селектора, записаного в дужках. Простий селектор — це універсальний селектор, селектор типу, ідентифікатора, атрибута, класу чи псевдокласу.

.list-item:not(:last-child) {
  margin-bottom: 20px;
}

Іньше

Генератор формул для опису адресації псевдокласів