# Селектори

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

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FFwc1wGdIv7pWYXtKZNjx%2Fcss-selectors-1f0064.464e0c0e.png?alt=media&#x26;token=a49d185c-635e-446d-8892-4b290d2a6382" alt="" width="375"><figcaption></figcaption></figure>

## Селектор елемента (тегу)[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0-%D1%82%D0%B5%D0%B3%D1%83) <a href="#selektor-elementa-tegu" id="selektor-elementa-tegu"></a>

Селектори тегу описують типи тегів до яких буде застосоване CSS-правило. Окремі теги такими селекторами не стилізують. Їх зазвичай використовують для однакової стилізації всіх тегів одного типу на сторінці. Наприклад, прибрати підкреслення у посилань, або визначити певний колір для тексту усіх абзаців на сторінці

```css
/* Прибиоання підкреслення всіх посилань на сторінці */
a {
  text-decoration: none;
}

/* Колір тексту всіх абзаців на сторінці */
p {
  color: red;
}
```

## Селектор класу[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80-%D0%BA%D0%BB%D0%B0%D1%81%D1%83) <a href="#selektor-klasu" id="selektor-klasu"></a>

Селектор класу на сьогодні - це основний селектор у веб розробці. Селектор класу задають за допомогою атрибута <mark style="background-color:red;">class</mark>.&#x20;

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FCi6Psb4I3i9mIGpWfsld%2Fclass-selector-ce3fd0.0b2a2ecd.png?alt=media&#x26;token=ad1b875f-b2c2-4b96-8943-de914595a4d1" alt="" width="375"><figcaption></figcaption></figure>

Назвою селектора класу має бути іменник англійською мовою що описує цей елемент. Обирає назву для класу сам розробник.&#x20;

В інтернеті є багато настанов як правильно обрати назву для селектора класу:

* [Найвживаніші слова для назв селекторів класу](https://github.com/yoksel/common-words)
* [Словник термінів](https://github.com/web-standards-ru/dictionary/blob/main/dictionary.md)&#x20;
* [Список скорочень вживаних в назвах селекторів класу ](https://github.com/nicothin/idiomatic-pre-CSS/blob/gh-pages/words_and_abbreviations.md)

```html
<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>
```

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FfsDo48k76PDOaYAguRQm%2Freusing-css-styles-9e43c5.16fefba9.png?alt=media&#x26;token=7340ca32-dca7-411c-8bda-d4e28e6ec06d" alt="" width="375"><figcaption></figcaption></figure>

В HTML елементам з однаковим значенням атрибута <mark style="background-color:red;">class</mark> (ім'ям класу) буде застосований один і той само стиль в CSS. Щоб визначити стилі для селектора класу перед його назвою ставлять крапку <mark style="background-color:red;">.</mark>

```css
/* Стиль буде застосовано до усіх тегів із класом wrap */
.wrap {
  width: 1024px;
}

/* Стиль буде застосовано до усіх тегів із класом title */
.title {
  сolor: red;
}

/* Стиль буде застосовано до усіх тегів із класом text */
.text {
  color: green;
  font-size: 14px;
}

/* Стиль буде застосовано до усіх тегів із класом link */
.link {
  text-decoration: none;
}
```

{% hint style="warning" %}
В іменах класу використовують тільки маленькі літери латинки і тире. Наприклад: image, image-wrap. Цифри і нижні підкреслення вважають поганою практикою. Окрім тих випадків коли це визначено методологією іменування класів (наприклад БЕМ) (буде розглянуто пізніше).
{% endhint %}

## Композиція класів[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D1%96%D1%8F-%D0%BA%D0%BB%D0%B0%D1%81%D1%96%D0%B2) (класи-модифікатори) <a href="#kompoziciya-klasiv" id="kompoziciya-klasiv"></a>

В елемента HTML може бути кілька класів. У такому разі їх перераховують в атрибуті class через пробіл.

```html
<element class="value1 value2 value3"></element>
```

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FOBRlXfg9yz6dAuhPGhfo%2Fmodifying-classes-48bd19.afd60085.png?alt=media&#x26;token=f88f0245-afa6-419e-9591-7f9590d767b6" alt="" width="375"><figcaption></figcaption></figure>

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

Наприклад у нас є три стилізовані абзаци, які відрізняються тільки кольором тексту. В такому разі роблять загальний стиль для абзацу, І додають клас, який модифікує тільки колір.

```html
<p class="message approved">Запит підтверджено</p>
<p class="message notification">Необхідні додаткові дані</p>
<p class="message refuse">Запит відхилено</p>
```

У стилях описуємо кілька правил: загальних для всіх повідомлень і специфічних для кожного типу.

```css
/* Загальний стиль для всіх абзаців */
.message {
  font-size: 20px;
  font-weight: bold;
}

/* Стилі-модифікатори */
.approved {
  color: green;
}

.notification {
  color: orange;
}

.refuse {
  color: red;
}
```

{% embed url="<https://codepen.io/khomiak/pen/XWoRday>" %}

## Селектор ідентифікатора[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80-%D1%96%D0%B4%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D1%96%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D0%B0) <a href="#selektor-identifikatora" id="selektor-identifikatora"></a>

Елементу на HTML сторінці можна задати атрибут <mark style="background-color:red;">id</mark>. Він повинен бути унікальним, тобто не повторюватися більше в жодному елементі на цій сторінці. Правило: На сторінці не може бути двох елементів з однаковим атрибутом <mark style="background-color:red;">id</mark>.&#x20;

```html
<p id="username">khomiak</p>
```

Щоб в CSS описати стилі для селектора ідентифікатора перед його іменем ставлять знак решітки <mark style="background-color:red;">#</mark>.

```css
#username {
  font-weight:bold;
  color: green;
}
```

{% hint style="info" %}
Використовувати селектори ідентифікатора для стилізації - дурний тон. Найкраще використовувати для стилізації класи. Ідентифікатори більше призначені для якорів.
{% endhint %}

## Селектор нащадка (контекстний)[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80-%D0%BD%D0%B0%D1%89%D0%B0%D0%B4%D0%BA%D0%B0) <a href="#selektor-nashadka" id="selektor-nashadka"></a>

Селектор нащадка використовують для стилізації  дітей, або нащадків будь-якої глибини вкладеності.

```html
<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 вказати стиль тегу, то він застосується до усіх посилань.  А якщо вказати батьківський клас, а через пробіл клас (або тег нащадка) то стиль застосується тільки до цих елементів

```css
/* Стиль застосується до всіх посилань у документі */
a {
  color: green;
  text-decoration: none;
  font-weight:bold;
}
```

```css
/* Стиль застосується лише до посилань, які лежать всередині тегу з класом theme-links */
.theme-links a {
  color: green;
  text-decoration: none;
  font-weight:bold;
}
```

У [прикладі](https://codepen.io/khomiak/pen/RwEVRzJ) в закладинці CSS спочатку спробуйте перший варіант, а потім другий.

{% embed url="<https://codepen.io/khomiak/pen/RwEVRzJ>" %}

## Селектор дитини[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80-%D0%B4%D0%B8%D1%82%D0%B8%D0%BD%D0%B8) <a href="#selektor-ditini" id="selektor-ditini"></a>

Селектор дитини дозволяє вибрати для стилізації **ТІЛЬКИ** безпосередню дитину всередині батьківського елемента.  Різницю селектора дитини від селектора нащадка добре описати на прикладі багаторівневого списку. Наприклад треба обвести рамкою тільки \<li> розділу, а не його елементів.

```html
<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-правило буде застосовано до всіх тегів <mark style="background-color:red;">\<li></mark>, і  рамка буде у кожного.

```css
/* Обведе рамкою всі <li> */
.chapter li {
  border: 1px solid red;
}
```

Селектор дитини допомагає вирішити цю проблему, вибравши тільки ті `<li>`, які є дітьми (перша вкладеність) списку `ul.menu`.

```css
/* Обведе рамкою тільки ті <li>, які є безпосередніми дітьми елементу з класом chapter */
.chapter > li {
  border: 1px solid red;
}
```

У [прикладі ](https://codepen.io/khomiak/pen/dywWXgV)в закладинці CSS спочатку спробуйте перший варіант, а потім другий.

{% embed url="<https://codepen.io/khomiak/pen/dywWXgV>" %}

## Селектор атрибута[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B0) <a href="#selektor-atributa" id="selektor-atributa"></a>

Селектор атрибута дозволяє застосувати стилі до елементів з певним атрибутом або його значенням.

### елемент\[атрибут][​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82) <a href="#elementatribut" id="elementatribut"></a>

Стилі застосуються до елементів у яких є вказаний атрибут.

```html
<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>
```

Вибере всі посилання з атрибутом <mark style="background-color:red;">target</mark>.

```css
a[target] {
  color: red;
}
```

{% embed url="<https://codepen.io/khomiak/pen/qBLmaZp>" %}

### елемент\[атрибут="значення"][​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-03/selectors#%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%BD%D1%8F) <a href="#elementatributznachennya" id="elementatributznachennya"></a>

Застосує стилі до всіх елементів у яких є атрибут з вказаним значенням.

```html
<a href="https://google.com">Google</a>

<a href="https://gmail.com">Gmail</a>

<a href="https://youtube.com">YouTube</a>
```

Вибере всі посилання з атрибутом <mark style="background-color:red;">href</mark> і відповідним значенням.

```css
/* стилізація за значенням атрибута */
a[href="https://google.com"]
{
  color: red;
}

a[href="https://gmail.com"]
{
  color: green;
}

a[href="https://youtube.com"]
{
  color: blue;
}
```

{% embed url="<https://codepen.io/khomiak/pen/wvRdzJV>" %}

**Покликання:**&#x20;

[CSS-селектори англійською](https://internetingishard.netlify.app/html-and-css/css-selectors/)

[30-CSS селекторів](https://webdesign.tutsplus.com/ru/the-30-css-selectors-you-must-memorize--net-16048t)
