Различия

Показаны различия между двумя версиями страницы.

--- psevdo-klasi_css [2023/09/19 17:16]
tro создано
+++ psevdo-klasi_css [2023/09/21 20:29] (текущий)
tro [odd]
@@ Строка 1: / Строка 1: @@
 ====== Псевдо-класи CSS ======
-  * :first-child  - звернення до першого дочерного єлементу
+===== first-child =====
-  * :last-child  - звернення до останнього дочерного єлементу
+  * first-child  - звернення до першого дочерного єлементу
-  * :nth-child(5) - звернення до 5го дочерного
+===== 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){
@@ Строка 8: / Строка 22: @@
 }
 </code>
-  * nth-child(2n+0) - кожен другий дочерний єлемент
+==== 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|Генератор формул для опису адресації псевдокласів]]