Види селекторів атрибутів CSS - експерт Semalt

Елемент HTML складається з класу, ідентифікатора та атрибутів. Селектор атрибутів вибирає елементи HTML, які містять атрибут або зі значенням атрибута. Селектори атрибутів надають простий метод застосування стилів до елементів HTML із певним значенням атрибута чи ознаки. Селектори атрибутів визначаються двома квадратними дужками, які додають атрибут до його значення. Тим не менш, ви можете поставити перед ним селектор елементів. Селектор CSS [атрибут] застосовує правила стилю до елемента, якщо і коли він складається з заданої ознаки.

Типи селекторів атрибутів

Існують різні типи селекторів атрибутів, кожен з яких може бути використаний для окремих випадків:

CSS [атрибут | = "значення"] Селектор виділяє елементи, які мають певну ознаку, і він починається з визначеного значення.

CSS [атрибут ~ = "значення"] Селектор використовується для пошуку елементів зі значенням властивості, що містять певне слово.

CSS [атрибут ^ = "значення"] Селектор знаходить елементи зі значенням властивості, випробовуючи певне значення. Значення - це не обов'язково ціле слово.

CSS [атрибут $ = "value"] Селектор знаходить компоненти, у яких значення атрибута закінчується певним значенням.

Застосування селекторів атрибутів CSS

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

Найбільш поширене використання селекторів атрибутів на входах. До них відносяться текстові селектори, перемикачі прапорців, селектори паролів, селектори файлів, приховані селектори, селектори паролів, радіоселектори, перемикачі скидання та інші.

Форми стилізації

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

Посилання на стиль

Наприклад, селектори атрибутів можуть використовуватися для створення стилю блогу, де у вас є список посилань на сайти друзів. Однак ви хочете, щоб кожне посилання було викладено по-різному. Традиційний шлях для цього - присвоїти ім'я виклику, яке вимагатиме більше націнок. Тим не менш, ти можеш використовувати nth-дитини, що вимагає, щоб замовлення ніколи не змінювалися. Використання селекторів атрибутів робить його таким простим, оскільки є атрибут, на який можна націлити.

Прикордонні входи

Стилізація елементів рамки за допомогою атрибуту зображення межі CSS є елегантним способом додавання зображень до тіла. Це дозволяє визначити зображення як межу елемента. Зображення кордону можна масштабувати, нарізати, повторювати різними способами, щоб забезпечити його прилягання до прикордонної зони. Атрибут радіус кордону дозволяє додавати закруглені кути без використання зображень. Властивість визначає форму кута.

Стилі кольорів

Селектори атрибутів CSS спрощують стилізацію всіх елементів, які мають певне значення кольору. Ви можете використовувати кольорові ключові слова, позначення RGB (), RGBA (), HSL () та HSLA (). Значення кольорів RGBA - це розширення кольорової моделі RGB з каналом, який визначає непрозорість кольору. Значення параметрів коливається від 1,0 (непрозоре}} до 0,0 (прозоре)

Кольорова модель HSL пояснюється як (Hue_saturation_Lightness). Представлення відтінку виконується у вигляді кута (0-360) або кольорового колеса. Насиченість і легкість вимірюються у відсотках 0% насиченості являє собою відтінок або сірий колір, а 100 - повнокольоровий. 100% легкість являє собою білий колір, а 0% - чорний.