Основні селектори

4.1 Селектори за типом

Селектори в CSS використовуються для визначення елементів, до яких будуть застосовуватися стилі. Основні селектори включають селектори за типом, класом, ідентифікатором і універсальні селектори. Кожен із цих селекторів має свої особливості й застосування.

Селектори за типом (Type Selectors)

Селектори за типом застосовують стилі до всіх елементів певного типу. Наприклад, можна застосувати стилі до всіх абзаців (<p>), заголовків (<h1>, <h2> тощо) або інших HTML-тегів.

    
      tagname {
        властивість: значення;
        властивість: значення;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Цей селектор застосує стилі до всіх елементів <p> в документі.

Особливості:

• Застосовується до всіх елементів зазначеного типу
• Зручно для глобальних стилів, які повинні застосовуватися до всіх елементів певного типу

4.2 Селектори за класом

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

Синтаксис:

    
      .classname {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

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

Особливості:

• Можна використовувати один і той самий клас для кількох елементів
• Дозволяє легко застосовувати однакові стилі до різних елементів

4.3 Селектори за ідентифікатором

Селектори за ідентифікатором застосовують стилі до елемента з унікальним ідентифікатором. Ідентифікатори визначаються за допомогою атрибута id в HTML і позначаються символом решітки # в CSS.

Синтаксис:

    
      #uniq-id {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

Цей селектор застосує стилі до елемента з ідентифікатором main.

    
      /* Вибирає елемент з ідентифікатором #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Цей елемент матиме ширину 800px.</div>
      <div>Цей елемент не буде стилізований.</div>
    
  

Особливості:

• Ідентифікатор має бути унікальним на сторінці
• Використовується для стилізації унікальних елементів, таких як заголовок або основний контент

4.4 Групові селектори

Групові селектори дозволяють застосовувати одне й те саме правило до кількох елементів. Вони скорочують кількість коду й спрощують керування стилями.

Синтаксис:

    
      селектор, селектор, … {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі елементи h1, h2 та h3 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Заголовок 1</h1>
      <h2>Заголовок 2</h2>
      <h3>Заголовок 3</h3>
      <p>Цей текст не буде стилізований цим правилом.</p>
    
  

4.5 Універсальні селектори

Універсальні селектори застосовують стилі до всіх елементів на сторінці. Вони позначаються зірочкою * і можуть бути корисними для скидання стилів або для застосування загальних стилів до всіх елементів.

Синтаксис:

    
      * {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

Цей селектор застосує стилі до всіх елементів на сторінці, скинувши їх відступи й установивши модель коробки.

    
      <div>Абзац 1</div>
      <div>Абзац 2</div>
    
  

    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
  

Особливості:

• Застосовується до всіх елементів на сторінці
• Корисний для глобальних скидань стилів або для застосування базових стилів до всіх елементів