Создание сайтов с нуля - урок 20 - Селекторы CSS, 2 часть – селекторы по атрибутам

Селекторы по атрибутам позволяют выбирать элементы по любым атрибутам, например, по атрибутам href, src, class и т.д., но чаще всего используются при работе с формами. Использование селекторов атрибутов в формах мы рассмотрим отдельно при изучении форм, а сейчас разберем эти селекторы на обычных элементах.

1. [attr] или div[attr] – выбор элементов с атрибутом attr (важно имя атрибута, а не значение).

2. [attr = ‘value’] - выбор элементов с атрибутом attr и значением value.

3. [attr^ = ‘value’] - выбор элементов по атрибуту attr со значением, которое начинается на value.

4. [attr $= ‘value’] - выбор элементов по атрибуту attr со значением, которое заканчивается на value.

5. [attr* = ‘value’] - выбор элементов по атрибуту attr, содержащим символы value.

6. [attr ~= ‘value’] - выбор элементов по атрибуту attr, содержащим слово value (несколько классов).

7. [attr | = ‘value’] - значение атрибута начинается с value, а потом идет дефис.