====== Псевдо-класи 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; } ====== Іньше ====== [[https://codepen.io/tea246/pen/WLEJMK|Генератор формул для опису адресації псевдокласів]]