Атрибутні селектори

6.1 Види атрибутних селекторів

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

Види атрибутних селекторів

• Селектор атрибуту (Attribute Selector)
• Селектор атрибуту зі значенням (Attribute Selector with Value)
• Селектор атрибуту з початковим значенням (Attribute Selector with Prefix)
• Селектор атрибуту із кінцевим значенням (Attribute Selector with Suffix)
• Селектор атрибуту, що містить значення (Attribute Selector with Substring)
• Селектор атрибуту з пробільним розділенням (Attribute Selector with Whitespace)
• Селектор атрибуту з розділенням по дефісу (Attribute Selector with Hyphen)

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

Селектор атрибута вибирає елементи, які мають вказаний атрибут, незалежно від його значення.

Синтаксис:

    
      [атрибут] {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі елементи, у яких є атрибут title */
      [title] {
        color: blue;
      }
    
  

    
      <p title="Це заголовок">Цей текст буде синім.</p>
      <p>Цей текст не буде синім.</p>
    
  

6.3 Селектор атрибута зі значенням

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

Синтаксис:

    
      [атрибут="значення"] {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі елементи, у яких атрибут title має значення "Приклад" */
      [title="Приклад"] {
        color: green;
      }
    
  

    
      <p title="Приклад">Цей текст буде зеленим.</p>
      <p title="Інший приклад">Цей текст не буде зеленим.</p>
    
  

6.4 Селектор атрибута, де значення з префіксом

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

Синтаксис:

    
      [атрибут^="значення"] {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі елементи, у яких атрибут title починається з "Початок" */
      [title^="Початок"] {
        color: red;
      }
    
  

    
      <p title="Початок тексту">Цей текст буде червоним.</p>
      <p title="Не початок">Цей текст не буде червоним.</p>
    
  

6.5 Селектор атрибута, де значення з суфіксом

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

Синтаксис:

    
      [атрибут$="значення"] {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі елементи, у яких атрибут title закінчується на "кінець" */
      [title$="кінець"] {
        color: orange;
      }
    
  

    
      <p title="Це кінець">Цей текст буде оранжевим.</p>
      <p title="Це початок">Цей текст не буде оранжевим.</p>
    
  

6.6 Селектор атрибута, що містить значення-підрядок

Селектор атрибута, що містить значення, вибирає елементи, атрибути яких містять вказане значення.

Синтаксис:

    
      [атрибут*="значення"] {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі елементи, у яких атрибут title містить "середина" */
      [title*="середина"] {
        color: purple;
      }
    
  

    
      <p title="Це середина тексту">Цей текст буде фіолетовим.</p>
      <p title="Немає середини тут">Цей текст не буде фіолетовим.</p>
    
  

6.7 Селектор атрибуту з пробілом-роздільником

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

Синтаксис:

    
      [атрибут~="значення"] {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      /* Вибирає всі елементи, у яких атрибут class містить "highlight" у списку класів */
      [class~="highlight"] {
        background-color: yellow;
      }
    
  

    
      <p class="highlight special">Цей текст буде з жовтим фоном.</p>
      <p class="special highlight">Цей текст також буде з жовтим фоном.</p>
      <p class="special">Цей текст не буде з жовтим фоном.</p>
    
  

6.8 Селектор атрибута з дефісом-розділювачем

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

Синтаксис:

    
      [атрибут|="значення"] {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

    
      p[lang|="uk"] {
        font-style: italic;
      }
    
  

    
      <p lang="uk">Цей текст буде курсивом.</p>
      <p lang="uk-UA">Цей текст також буде курсивом.</p>
      <p lang="en">This text will not be italicized.</p>
    
  

1

Опитування

Основи CSS, рівень 12, лекція 6

Недоступний

Основи CSS

Основи CSS

Відкрити