sposobi_viboru_selektoru_dlja_stilju

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
sposobi_viboru_selektoru_dlja_stilju [2023/09/13 20:08]
tro 		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> <code>
-p{color: cyan;}+*{color: cyan;}
 </code> </code>
 ===== по тегу html===== ===== по тегу html=====
-Наслідує до усіх по можливочсті+  * Наслідує до усіх підлеглих по можливості 
 +  * Специфічність: 0.0.1
 <code> <code>
 body{color: cyan;} body{color: cyan;}
 </code> </code>
 +Наслідує до усіх що у тегу p
 <code> <code>
 p{color: cyan;} p{color: cyan;}
 </code> </code>
-===== по глобальному атрибуту id =====+===== по id =====
 В ідеалі повинен бути уникальним. Але працює і так. В ідеалі повинен бути уникальним. Але працює і так.
   - html додаєемо параметр id="myid"   - html додаєемо параметр id="myid"
Строка 35: Строка 39:
 } }
 </code> </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) ===== ===== по селектору нащадка (X Y) =====
 Селектор нащадка або контекстний селектор. Використовується для вибору елементів, що відповідають певному контексту, тобто селектор застосовує стилі до ВСІХ нащадків елемента за будь-якої глибини вкладеності. Селектор нащадка або контекстний селектор. Використовується для вибору елементів, що відповідають певному контексту, тобто селектор застосовує стилі до ВСІХ нащадків елемента за будь-якої глибини вкладеності.
Строка 115: Строка 136:
 } }
 </code> </code>
 +
 +==== Різне ====
 +  * На один єлемент при вказанні классів можна через пробіл додавати додатковий клас у котрому будуть вже щось загальне вказано
 +
  • /sites/data/attic/sposobi_viboru_selektoru_dlja_stilju.1694635731.txt.gz
  • Последнее изменение: 2023/09/13 20:08
  • — tro