Псевдо-класи CSS
first-child
- first-child - звернення до першого дочерного єлементу
last-child
- last-child - звернення до останнього дочерного єлементу
nth-child
Псевдоклас :nth-child(an + b) вибирає елементи в колекції сусідів за номером, вказаним у дужках, за допомогою циклу an + b `, який дозволяє задати правило для послідовності елементів.
- a — період циклу. Довільне число.
- n — лічильник циклу. Починається з нуля та збільшується на одиницю на кожній ітерації.
- b — зміщення. Довільне число.
- nth-child(5) - звернення до 5го дочерного
- nth-child(2n+0) - кожен другий дочерний єлемент (a-починаючи кожен який, n-не чіпаємо, + зміщеення 0) з верху вниз
- nth-child (even) - парні
- nth-child (odd) - не парні
- nth-child(-n+3) - усе крім третьего
- nth-last-child(2n+0) - кожен другий дочерний єлемент (a-починаючи кожен який, n-не чіпаємо, + зміщеення 0) з низу у верх
.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; }