psevdo-klasi_css [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Псевдо-класи 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) з низу у верх
<code>
.someitem:nth-child(5){
margin-bottom: red
}
</code>
==== even ====
Для вибору всіх парних елементів можна використовувати формулу 2n або її псевдонім — значення even, зарезервоване слово.
<code>
.list-item:nth-child(2n) {
  background-color: orange;
}

/* Аналогічно використовуючи псевдонім */
.list-item:nth-child(even) {
  background-color: orange;
}
</code>
==== odd ====
Для вибору непарних елементів можна використовувати формулу 2n + 1 або її псевдонім — значення odd, зарезервоване слово.
<code>
.list-item:nth-child(2n + 1) {
  background-color: orange;
}

/* Аналогічно використовуючи псевдонім */
.list-item:nth-child(odd) {
  background-color: orange;
}
</code>
===== not()=====
дозволяє вибрати всі елементи, що не підходять під критерій.
Критерій вказується у вигляді простого селектора, записаного в дужках. Простий селектор — це універсальний селектор, селектор типу, ідентифікатора, атрибута, класу чи псевдокласу.
<code>
.list-item:not(:last-child) {
  margin-bottom: 20px;
}
</code>
====== Іньше ======
[[https://codepen.io/tea246/pen/WLEJMK|Генератор формул для опису адресації псевдокласів]]