Каскад.
Ієрархія.
Наслідування.
Псевдокласи.

Каскадування - це механізм, який керує кінцевими значеннями властивостей елемента, якщо до нього застосовується кілька CSS-правил.

➭ Якщо до елемента застосовується кілька правил, їх властивості комбінуються.

➭ Якщо правила містять однакові властивості з різними значеннями, то вони конфліктують.

➭ Для того щоб зібрати фінальні стилі елемента і вирішити конфлікти значень властивостей, браузер використовує три механізми: ієрархію, специфічність і наслідування.

Ієрархія в CSS стосується відносин між HTML елементами на веб-сторінці. Каскадні таблиці стилів (CSS) використовуються для визначення зовнішнього вигляду та форматування HTML-елементів.

Ієрархія елементів визначає, які стилі будуть застосовані до конкретних елементів, ґрунтуючись на їх вкладеностях та відносинах у структурі документа.

Важливими концепціями в ієрархії CSS є:

➭ Батьківські та дочірні елементи: Елемент, вкладений в інший, вважається дочірнім стосовно батьківського елемента.

➭ Нащадки: Елементи, вкладені в інші елементи.

➭ Предки: Елемент, у якому знаходиться інший елемент, вважається предком останнього.

➭ Дочірні елементи (або Сусіди): Елементи, які є одному рівні вкладеності і мають спільного батька, вважаються дочірніми (або сусідами).

Для кожного CSS-правила браузер обчислює специфічність (вагу) селектора.

Якщо до елементу потрібно застосувати властивості з різних правил, та існують конфліктуючі (однакові) властивості, використовується значення властивості з правила з найбільш високою специфічністю селектора.

Значення специфічності складається з чотирьох рангів, важливість яких збільшується справа наліво:

Специфічність правила можна підвищити за допомогою ключового слова !important, додавши його після значення властивості.

!important перекриває inline-стилі (інлайнові стилі).

У цьому прикладі значення такої властивості приорітетніше від усіх інших, і колір тексту абзацу буде помаранчевий.

                        
            p {
                color: tomato !important;
            }
            

            p#text-id.text {
                color: blue;
            }
                        
                    

➭ Вкрай не рекомендується використовувати !important в сучасній розробці.

➭ Єдиний оптимальний випадок - це перевизначення значення властивості, якщо відсутній прямий доступ до файлу зі стилями, наприклад стиль з бібліотеки.

Наслідування – це коли нащадки від предків можуть наслідувати деякі текстові властивості.

Це зручно, оскільки не потрібно ставити повторювані стилі для кожного нащадка окремо.

Винятки: Не всі елементи наслідують значення властивостей від предків. Наприклад, посилання не наслідує колір тексту.

➭ Значення inherit говорить браузеру про те, що необхідно наслідувати значення властивості від предка.

➭ Для кольору краще використовувати значення currentColor (поточний колір).

Якщо селектор виглядає як A > B > C + X Y, варто задуматися.

Чим простіший селектор, тим менше проблем зі специфічністю.

Візьміть собі за правило використовувати селектори класу.

Атрибут class не тільки допомагає уникнути проблем зі специфічністю, але й підвищує читабельність HTML-розмітки.

Перший підхід - це присвоєння класу загальному блоку-батькові та використання селекторів тегів дитини і нащадка.

Другий підхід - це додавання описових класів блоку-батькові і тегам всередині нього та використання селекторів класів дитини і нащадка.

Третій підхід полягає у встановленні унікальних класів блоку-батькові і кожному тегу всередині нього за принципом імя_батька - імя_дитини та використання цих унікальних класів.

Не варто обмежувати себе у виборі лише одного підходу. Усі три методи іменування розмітки класами і написання стилів можна використовувати разом, залежно від ситуації.

Псевдокласи стану (cелектори стану) використовуються для застосування стилів до інтерактивних елементів за певної події, наприклад, у разі наведення курсору на посилання або фокусування з клавіатури.

Псевдоклас визначає конкретний стан елемента і прикріплений до селектора тегу, класу тощо.

                        
селектор:псевдоклас {
    властивість: значення;
    властивість: значення;
    властивість: значення;
}
                        
                    

Розглянемо приклад коду з посиланням:

                        
<p>
    Хорошу шпаргалку з тегів можна знайти
        <a 
            class="link" 
            href="https://htmlreference.io"
        >
            за цим посиланням
        </a>
</p>
                        
                    

Додамо посиланню базовий стиль:

                        
.link {
    color: teal;
}
                        
                    

Псевдоклас :hover

Потім додамо посиланню стиль наведення - стан :hover

                        
.link:hover {
    color: red;
    background-color: yellow;
}
                        
                    

Активується, коли інтерактивний елемент (посилання, кнопка, поле форми) отримує фокус під час навігації по сторінці клавіатурою (клавішею Tab).

                            
    .link {
        color: violet;
    }
                            
                        

Додамо посиланню стиль наведення - стан :focus

                            
    .link:focus {
        color: tomato;
        background-color: royalblue;
    }
                            
                        

Відбувається під час активації елемента. Наприклад, посилання стає активним, якщо навести на нього курсор і клацнути мишкою.

Незважаючи на те, що активним може стати практично будь-який елемент, псевдоклас :active використовується в основному для посилань і кнопок.

                            
    .link {
        color: green;
    }
                            
                        

                            
    .link:active {
        color: white;
        background-color: black;
    }
                            
                        

Цей псевдоклас активується на посиланнях, які вже були відвідані.

За замовчуванням посилання відображаються синіми і після відвідування стають фіолетовими.

                            
    .link {
        color: blue;
    }
                            
                        

                            
    .link:visited {
        color: blueviolet;
    }
                            
                        

Структурні псевдокласи - це спосіб вибрати певні елементи з колекції дочірніх елементів (сусідів), без присвоєння додаткових класів.

Дочірні елементи (сусіди) - це елементи зі спільним батьком:

                        
<ul class="list">
    <li class="list-item">1</li>
    <li class="list-item">2</li>
    <li class="list-item">3</li>
    <li class="list-item">4</li>
    <li class="list-item">5</li>
    <li class="list-item">6</li>
    <li class="list-item">7</li>
    <li class="list-item">8</li>
    <li class="list-item">9</li>
    <li class="list-item">10</li>
</ul>
                        
                    

Декілька наглядних прикладів структурних псевдокласів:

• Перший елемент в колекції сусідів:

      .list-item:first-child {
          color: white;
          background-color: tomato;
      }                           
                                  

• Останній елемент в колекції сусідів:

      .list-item:last-child {
          color: white;
          background-color: tomato;
      }
                                  

• N-й елемент в колекції сусідів:

      .list-item:nth-child(3) {
          color: white;
          background-color: tomato;
      }
                                  

• Кожен N-й елемент в колекції сусідів:

      .list-item:nth-child(3n + 1) {
          color: white;
          background-color: tomato;
      }
                                  

• • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10