Как атрибутами data-* можно стилизовать элементы с помощью CSS?

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

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

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

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

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