Оскільки ми не хочемо стилізувати всі наші елементи HTML одночасно, нам потрібна можливість вибрати підмножина цих елементів.
Селектори CSS визначають, до яких елементів ми хочемо застосувати стиль.
Базові селектори тегів
Націлитися на базові теги HTML легко: просто використовуйте ім'я тега.
Є прямий зв'язок між ім'ям тега HTML і використовуваним селектором CSS.
З огляду на, що ми, ймовірно, не хочемо стилізувати все абзаци або всі заголовки однаково, нам треба їх розрізняти.
З усіх атрибутів HTML атрибут class є найбільш важливим для CSS. Він дозволяє визначити групу елементів HTML, на які ми можемо точно націлитися. Просто поставте крапку перед іменем класу який ви хочете використовувати:
З іншого боку є атрибут HTML class зі значенням date. Він повинен збігатися з ім'ям класу CSS.
Ви можете використовувати будь-яке ім'я для вашого класу, але воно не повинно починатися з цифри.
Селектор класу .date буде націлений на всі елементи HTML з атрибутом class = "date". Таким чином, наступні елементи HTML все будуть стилізовані:
Майте на увазі, що ім'я тега не важливо. враховується тільки атрибут class.
ідентифікатори
Можна також використовувати атрибут id в вашому HTML і визначити його в вашому CSS за допомогою решітки:
Ідентифікатори схожі на класи, так як вони теж засновані на атрибуті HTML.
кожен
кожен
- всередині предка з class = "dico"
об'єднання селектор
Давайте скористаємося нашим попереднім прикладом, в якому ми хочемо зробити наші дати червоними:
Якщо ми захочемо замість цього, щоб наші дати всередині відображалися синім кольором? Ми можемо додати наступне правило CSS:
em.date об'єднує в собі:
- селектор тега em;
- селектор класу .date.
Він буде застосовуватися тільки до елементів . Це не вплине на інші .date або .
ієрархія селекторів
Пропуск в селекторі визначає ставлення предок / нащадок. Скажімо, ми хочемо, щоб посилання в нашому заголовку були червоного кольору:
Псевдокласи
Елементи HTML можуть мати різні стани. Найбільш поширений випадок - коли ви наводите курсор на посилання. В CSS можливо застосувати інший стиль, коли відбувається така подія.
Псевдокласи прив'язані до звичайних селекторам і починаються з двокрапки:
Схожі статті
кожен