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

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

Атрибутні селектори в CSS дозволяють вибирати HTML-елементи на основі значень їх атрибутів, таких як id, class, name, type, та інших. Вони забезпечують гнучкість і точність у виборі елементів, що особливо корисно для стилізації елементів форм, посилань і інших елементів з унікальними атрибутами. У цій статті розглянемо різні типи атрибутних селекторів і їх застосування.

Атрибутні селектори поділяються на кілька категорій, які дозволяють вибирати елементи за наявністю атрибуту, його точним значенням або його частиною. Основні види атрибутних селекторів:

1. Селектор атрибуту: вибирає елементи, які містять певний атрибут незалежно від його значення.
2. Селектор атрибуту зі значенням: вибирає елементи з атрибутом, який дорівнює вказаному значенню.
3. Селектор атрибуту із початковим значенням: вибирає елементи, у яких значення атрибуту починається з вказаного префіксу.
4. Селектор атрибуту із кінцевим значенням: вибирає елементи, у яких значення атрибуту закінчується на певний суфікс.
5. Селектор атрибуту, що містить значення: вибирає елементи, у яких значення атрибуту містить певну підстроку.
6. Селектор атрибуту з пробільним розділенням: вибирає елементи з атрибутом, значення якого містить певне слово, розділене пробілами.
7. Селектор атрибуту із розділенням по дефісу: вибирає елементи з атрибутом, значення якого містить певне слово, розділене дефісами.

2. Селектор атрибуту (Attribute Selector)

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

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

У цьому прикладі всі <input> елементи з атрибутом type отримають чорну рамку, незалежно від значення цього атрибуту.

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

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

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Тут лише текстове поле <input type="text"> отримає світло-сірий фон.

4. Селектор атрибуту із початковим значенням

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

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

    
<a href="https://example.com/page1">Посилання на сайт example.com</a>
<a href="https://another.com">Інше посилання</a>
    
  

Лише перше посилання буде пофарбоване у зелений колір, оскільки воно починається з "https://example.com".

5. Селектор атрибуту із кінцевим значенням

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

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Зображення 1">
<img src="image2.jpg" alt="Зображення 2">
    
  

Тут лише зображення з розширенням .png отримає синю рамку.

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

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

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">Посилання на розділ 1</a>
<a href="https://example.com/about">Про нас</a>
<a href="https://example.com/section2">Посилання на розділ 2</a>
    
  

Лише посилання, які містять "section" у своєму href, будуть виділені жирним шрифтом.

7. Селектор атрибуту з пробільним розділенням

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

    
[class~="featured"] {
  background-color: yellow;
}
    
  

    
<div class="featured item">Елемент з класом "featured"</div>
<div class="item">Звичайний елемент</div>
<div class="highlight featured">Інший елемент з класом "featured"</div>
    
  

Тут лише елементи, які містять featured у списку класів, отримають жовтий фон.

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

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

    
[lang|="en"] {
  color: blue;
}
    
  

    
<p lang="en">Текст англійською мовою</p>
<p lang="en-us">Текст на американській англійській</p>
<p lang="fr">Текст французькою</p>
    
  

Тут синім кольором будуть виділені лише елементи з атрибутом lang, рівним "en" або починаються на "en-", наприклад, "en-us".

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

<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад атрибутних селекторів CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Текстове поле">
<input type="password" placeholder="Пароль">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">Посилання на example.com</a>
<a href="https://example.com/section2">Посилання на розділ</a>

<img src="image.png" alt="Зображення PNG">
<img src="photo.jpg" alt="Зображення JPG">

<div class="featured item">Елемент з класом "featured"</div>
<div class="item">Звичайний елемент</div>
<div class="highlight featured">Інший елемент з класом "featured"</div>

<p lang="en">Текст англійською мовою</p>
<p lang="en-us">Текст американською англійською</p>
<p lang="fr">Текст французькою мовою</p>
</body>
</html>

<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад атрибутних селекторів CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Текстове поле">
<input type="password" placeholder="Пароль">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">Посилання на example.com</a>
<a href="https://example.com/section2">Посилання на розділ</a>

<img src="image.png" alt="Зображення PNG">
<img src="photo.jpg" alt="Зображення JPG">

<div class="featured item">Елемент з класом "featured"</div>
<div class="item">Звичайний елемент</div>
<div class="highlight featured">Інший елемент з класом "featured"</div>

<p lang="en">Текст англійською мовою</p>
<p lang="en-us">Текст американською англійською</p>
<p lang="fr">Текст французькою мовою</p>
</body>
</html>

/* Селектор атрибуту */
input[type] {
  border: 1px solid black;
}

/* Селектор атрибуту зі значенням */
input[type="text"] {
  background-color: #f0f0f0;
}

/* Селектор атрибуту з початковим значенням */
a[href^="https://example.com"] {
  color: green;
}

/* Селектор атрибуту з кінцевим значенням */
img[src$=".png"] {
  border: 2px solid blue;
}

/* Селектор атрибуту, що містить значення */
a[href*="section"] {
  font-weight: bold;
}

/* Селектор атрибуту з пробільним розділенням */
[class~="featured"] {
  background-color: yellow;
}

/* Селектор атрибуту з розділенням через дефіс */
[lang|="en"] {
  color: blue;
}