Селектори
Селектори потрібні для того, щоб за певною ознакою вибрати один або групу елементів для подальшої стилізації. Селекторів буває багато, треба знати хоча б основні з них.
Селектор елемента (тегу)
Селектори тегу описують типи тегів до яких буде застосоване CSS-правило. Окремі теги такими селекторами не стилізують. Їх зазвичай використовують для однакової стилізації всіх тегів одного типу на сторінці. Наприклад, прибрати підкреслення у посилань, або визначити певний колір для тексту усіх абзаців на сторінці
/* Прибиоання підкреслення всіх посилань на сторінці */
a {
text-decoration: none;
}
/* Колір тексту всіх абзаців на сторінці */
p {
color: red;
}Селектор класу
Селектор класу на сьогодні - це основний селектор у веб розробці. Селектор класу задають за допомогою атрибута class.
Назвою селектора класу має бути іменник англійською мовою що описує цей елемент. Обирає назву для класу сам розробник.
В інтернеті є багато настанов як правильно обрати назву для селектора класу:
<div class="wrap">
<h1 class="title">The main title of this page</h1>
<p class="text">
Welcome to our website! To use our App follow this
<a class="link" href="">link</a>.
</p>
</div>
В HTML елементам з однаковим значенням атрибута class (ім'ям класу) буде застосований один і той само стиль в CSS. Щоб визначити стилі для селектора класу перед його назвою ставлять крапку .
/* Стиль буде застосовано до усіх тегів із класом wrap */
.wrap {
width: 1024px;
}
/* Стиль буде застосовано до усіх тегів із класом title */
.title {
сolor: red;
}
/* Стиль буде застосовано до усіх тегів із класом text */
.text {
color: green;
font-size: 14px;
}
/* Стиль буде застосовано до усіх тегів із класом link */
.link {
text-decoration: none;
}В іменах класу використовують тільки маленькі літери латинки і тире. Наприклад: image, image-wrap. Цифри і нижні підкреслення вважають поганою практикою. Окрім тих випадків коли це визначено методологією іменування класів (наприклад БЕМ) (буде розглянуто пізніше).
Композиція класів (класи-модифікатори)
В елемента HTML може бути кілька класів. У такому разі їх перераховують в атрибуті class через пробіл.
<element class="value1 value2 value3"></element>
Цю можливість використовують для комбінування і повторного використання стилів.
Наприклад у нас є три стилізовані абзаци, які відрізняються тільки кольором тексту. В такому разі роблять загальний стиль для абзацу, І додають клас, який модифікує тільки колір.
<p class="message approved">Запит підтверджено</p>
<p class="message notification">Необхідні додаткові дані</p>
<p class="message refuse">Запит відхилено</p>У стилях описуємо кілька правил: загальних для всіх повідомлень і специфічних для кожного типу.
/* Загальний стиль для всіх абзаців */
.message {
font-size: 20px;
font-weight: bold;
}
/* Стилі-модифікатори */
.approved {
color: green;
}
.notification {
color: orange;
}
.refuse {
color: red;
}Селектор ідентифікатора
Елементу на HTML сторінці можна задати атрибут id. Він повинен бути унікальним, тобто не повторюватися більше в жодному елементі на цій сторінці. Правило: На сторінці не може бути двох елементів з однаковим атрибутом id.
<p id="username">khomiak</p>Щоб в CSS описати стилі для селектора ідентифікатора перед його іменем ставлять знак решітки #.
#username {
font-weight:bold;
color: green;
}Селектор нащадка (контекстний)
Селектор нащадка використовують для стилізації дітей, або нащадків будь-якої глибини вкладеності.
<h1>Тематичні рубрики сайту</h1>
<ul class="theme-links">
<li>
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
</ul>
<a href="">На головну сторінку</a>У цьому випадку якщо у файлі CSS вказати стиль тегу, то він застосується до усіх посилань. А якщо вказати батьківський клас, а через пробіл клас (або тег нащадка) то стиль застосується тільки до цих елементів
/* Стиль застосується до всіх посилань у документі */
a {
color: green;
text-decoration: none;
font-weight:bold;
}/* Стиль застосується лише до посилань, які лежать всередині тегу з класом theme-links */
.theme-links a {
color: green;
text-decoration: none;
font-weight:bold;
}У прикладі в закладинці CSS спочатку спробуйте перший варіант, а потім другий.
Селектор дитини
Селектор дитини дозволяє вибрати для стилізації ТІЛЬКИ безпосередню дитину всередині батьківського елемента. Різницю селектора дитини від селектора нащадка добре описати на прикладі багаторівневого списку. Наприклад треба обвести рамкою тільки <li> розділу, а не його елементів.
<ul class="chapter">
<li>
Технології
<ul class="chapter-item">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Зображення
<ul class="chapter-item">
<li>Растрові</li>
<li>Векторні</li>
</ul>
</li>
<li>
Збірки
<ul class="chapter-item">
<li>Parcel</li>
<li>Webpack</li>
</ul>
</li>
</ul>Якщо використати селектор нащадка (контекстний), то CSS-правило буде застосовано до всіх тегів <li>, і рамка буде у кожного.
/* Обведе рамкою всі <li> */
.chapter li {
border: 1px solid red;
}Селектор дитини допомагає вирішити цю проблему, вибравши тільки ті <li>, які є дітьми (перша вкладеність) списку ul.menu.
/* Обведе рамкою тільки ті <li>, які є безпосередніми дітьми елементу з класом chapter */
.chapter > li {
border: 1px solid red;
}У прикладі в закладинці CSS спочатку спробуйте перший варіант, а потім другий.
Селектор атрибута
Селектор атрибута дозволяє застосувати стилі до елементів з певним атрибутом або його значенням.
елемент[атрибут]
Стилі застосуються до елементів у яких є вказаний атрибут.
<a href="https://google.com" target="_blank"> Google </a>
<a href="https://gmail.com" target="_blank"> Gmail </a>
<a href="https://youtube.com"> YouTube </a>Вибере всі посилання з атрибутом target.
a[target] {
color: red;
}елемент[атрибут="значення"]
Застосує стилі до всіх елементів у яких є атрибут з вказаним значенням.
<a href="https://google.com">Google</a>
<a href="https://gmail.com">Gmail</a>
<a href="https://youtube.com">YouTube</a>Вибере всі посилання з атрибутом href і відповідним значенням.
/* стилізація за значенням атрибута */
a[href="https://google.com"]
{
color: red;
}
a[href="https://gmail.com"]
{
color: green;
}
a[href="https://youtube.com"]
{
color: blue;
}Покликання:
Last updated