CSS-селектори та їх види

Селектори по CSS-атрибуту

Припустимо, що в нашому коді присутні елементи з якимись атрибутами, але всі вони відрізняються один від одного і написані через дефіс, а нам потрібно вибрати ті, у яких назва класу починається з певного слова, наприклад «selector», і класи розділені знаком «-». Що потрібно робити в цьому випадку? Запис селектора починається з квадратних дужок, куди спочатку записується назва атрибуту, потім вертикальний слеш, знак «=» і «selector»: «data- |= selector». Далі пишемо потрібну властивість, яке хочеться змінити. В результаті вибереться елемент з заданими параметрами. Змінюючи класи, можна міняти і властивості певних частин коду. Якщо ж імена класів записані не через дефіс, а одним словом, тоді їх теж можна вибрати, але використовуючи трохи інший запис. У цьому випадку вертикальний слеш замінюється символом «^»: «data^ = selector». Такий селектор вибирає підрядок з початком назви класу.

Як вибрати елемент з певним закінченням в назві класу

Тепер зробимо інакше і виберемо частини коду не з початку опису класу, а за останніми літерами в його назві. Для цього нам знадобиться значок долара. Ставимо його на місце галочки, а після знака рівності пишемо закінчення назви класу: «data$ = ctor». Тепер елементи з цим поєднанням букв будуть обрані і до них застосовані певні властивості. Вибирати можна будь-атрибут. Розберемо, як вчинити, якщо нам потрібно знайти елемент з якимось буквосочетанием в середині слова. У цьому випадку міняємо знак долара на зірочку, а після знака рівності пишемо потрібні літери: «data* = ct».