С помощью атрибутов data-* в CSS можно стилизовать элементы, основываясь на атрибутах и их значениях. 23

В CSS-коде селектор data-атрибута заключается в квадратные скобки. 5 Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название. 5

Пример стилизации элементов с data-атрибутом: 5

// HTML код& 5lt;div class='large_btn' data-size='large'>button</div>/ 5/ CSS код* 5 селектор по названию атрибута: `[data-size='large'] { font-size: 30px; padding: 20px; }`; 5* селектор по тегу и названию: `div [data-size='large'] { font-size: 30px; padding: 20px; }`; 5* селектор по классу и названию: `large_btn.[data-size='large'] { font-size: 30px; padding: 20px; }`. 5

Также с помощью атрибутов data-* можно извлекать значения атрибутов и выводить их на странице. 2