Различия

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

--- sposobi_viboru_selektoru_dlja_stilju [2023/09/10 19:15]
tro [Псевдоклас :focus]
+++ sposobi_viboru_selektoru_dlja_stilju [2023/12/26 18:26] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Способи вибору селектору для стилю ======
+[[https://www.w3schools.com/cssref/css_selectors.php|Документація по варінтам селекторів]]
+===== по * =====
+  * До усіх єлементів практично примусово. Його вага меньше за селектору по тегу
+  * Специфічність: 0.0.0
+<code>
+*{color: cyan;}
+</code>
 ===== по тегу html=====
+  * Наслідує до усіх підлеглих по можливості
+  * Специфічність: 0.0.1
+<code>
+body{color: cyan;}
+</code>
+Наслідує до усіх що у тегу p
 <code>
 p{color: cyan;}
 </code>
-===== по глобальному атрибуту id =====
+===== по id =====
 В ідеалі повинен бути уникальним. Але працює і так.
   - html додаєемо параметр id="myid"
@@ Строка 26: / Строка 39: @@
 }
 </code>
+Можна вказувати декілька класів через пробіл
+<code>
+<a href="" class="header-logo link">
+</code>
+===== По data-атрибуту =====
+Будь-який атрибут, ім'я якого починається з data-, є data-* атрибутом. Припустимо, у нас є стаття і ми хочемо зберегти додаткову інформацію без візуального подання. Для цього можна використовувати data-атрибути:
+<code>
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+  ...
+</article>
+</code>
 ===== по селектору нащадка (X Y) =====
 Селектор нащадка або контекстний селектор. Використовується для вибору елементів, що відповідають певному контексту, тобто селектор застосовує стилі до ВСІХ нащадків елемента за будь-якої глибини вкладеності.
@@ Строка 106: / Строка 136: @@
 }
 </code>
+==== Різне ====
+  * На один єлемент при вказанні классів можна через пробіл додавати додатковий клас у котрому будуть вже щось загальне вказано