Гайд по CSS селекторам

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

В прикладах нижче, CSS буде знаходитись у файлі під назвою style.css, на який буде посилатись HTML, який зберігатиметься в index.html. Це два окремих файли. Великий плюс CSS - зберігання дизайну окремо від документа.

Ось приклад HTML документу:

      <title>Ми вивчаємо селектори!</title>
      <link href="style.css" rel="stylesheet">

      <h1 id="yay">Yay</h1>

А CSS буде складатись лише з селекторних блоків.

ID селектор

HTML:

    <div></div>
    <aside id="happy-cake"></aside>
    <div>Неправильний ID</div>
    <div class="happy-cake">Це не ID!</div>

CSS:

    #happy-cake {
    }

ID селектори- самий потужний тип селекторів. Це означає, що вони "витісняють" інші типи селекторів, а стилі вказані з цим селектором застосовуються першочергово. Звучить гарно, але це не так. Дуже часто потрібні селектори, які є нижчі за "рангом", щоб в подальшому їх було легко обійти, якщо виникте потреба.

Селектор класу

HTML:

    <div class="module"></div>
    <aside class="country module iceland"></aside>
    <div class=".module">крапка потрібна для CSS, а не для HTML</div>
    <div class="bigmodule">Неправильний клас</div>

CSS:

    .module {    
    }

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

Тег селектор

HTML:

    <h2>Hi, Mom</h2>  
    <main>
      <div>   
         <h2>Anywhere</h2>
      </div>
    </main>
    <div class="h2">Неправильний тег</div> 
    <h2class="yolo">Пробіл після тегу обов'язковий!

CSS:

    h2 { 
    }

Цей тип селекторів дуже корисний при зміні унікальних властивостей HTML документа. Наприклад налаштування

для list-style або

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

Не зловживайте цим типом селекторів. Краще використовувати стилювання за класом.

Селектор атрибуту

HTML:

    <div></div> 
    <aside class="closed" data-modal="open"></aside>
    <div>Неправильне значення</div>
    <div>Немає значення</div>
    <div>Невірний атрибут</div>

CSS:

    [data-modal="open"] {
    }

Ви можете заявити, що атрибутні селектори більш корисні ніж селектори класу, тому що вони мають однакову важливість, але можуть бути будь-яким атрибутом, не тільки class, а також ми можемо вибирати їх за значенням.

Навряд це проблема, але атрибутні селектори не підтримуються IE6.

Селектор позиції

HTML:

    <ul>
      <li>Ні</li>
      
      <li>Так, №2</li>
      <li>Ні</li>
    </ul>

CSS:

    :nth-child(2) {
    }

Використовуючи цей тип селектора, ви можете обрати елементи за їх положенням в HTML.

Інші псевдо-селектори

HTML:

    <div></div>
    <aside data-blah=""></aside>
    <div> </div>
    <div>
    </div>

CSS:

    :empty {
    }

:empty - це один з багатьох псевдо-селекторів, які ви можете розпізнати за (:). Як правило, вони представляють поодинокі атрибути.

Це трохи інше, ніж псевдо елементи, які можна розпізнати за (::).

Додатково

Можна об'єднувати селектори. Наприклад:

    .module.news {  
      /* Вибирає елементи з ОБОХ цих класів */
    }
    #site-footer::after {
      /* Додає контент після елемента з таким ID */
    }
    section[data-open] {
      /* Вибирає тільки елементи розділу, якщо вони мають цей атрибут */
    }

Також існують комбінації ~, + і >, які впливають на селектори:

    .module > h2 {
      /* Виберіть h2 елементи, які є безпосередніми нащадками елемента з класом */
    } 
    h2 + p {
      /* Виберіть p-елементи, безпосередні нащадки h2 елемент */
    }
    li ~ li {
      /* Виберіть li-елементи, які є братами і сестрами (або нащадками) іншого елемента li. */
    }