Селектори

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

Селектор елемента (тегу)​

Селектори тегу описують типи тегів до яких буде застосоване 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;
}

Покликання:

CSS-селектори англійською

30-CSS селекторів