Стилизация элемента по атрибуту data
Стилизация data атрибута!
- Изменение цвета текста в элементе с атрибутом data.
- Как изменить размер текста в элементе с атрибутом data.
- Атрибут data и display-none
Изменение цвета текста в элементе с атрибутом data.
Для того, чтобы изменить цвет в элементе Dom с атрибутом "data" нам понадобится:
Нужен элемент "дома", пусть это будет div :
В него помещаем атрибут data с произвольным именем и значением:
Далее нам потребуется один из способов "3 способа css" - возьмем style
И далее... как говорится дело в шляпе... прописываем стили для текста:
Соберем весь код вместе:
css:
<style>
[data-example1] {
color: #f707da !important;
}
</style>
Html :
<div data-example1="1">data-example1="1"</div>
Смотрим на результат стилизации элемента с атрибутом data:
Как изменить размер текста в элементе с атрибутом data.
Не только размер шрифта можно изменить у элемента с атрибутом data, но и все возможные другие стили, которые существуют в природе - спокойно можно прикрутить к этому блоку!
Давайте напишем несколько свойств для данного элемента с "data" :
css:
<style>
[data-example] {
FONT-SIZE: 20PX;
color: red;
background: aliceblue;
padding: 20px;
border: 1px solid;
}
</style>
Html :
<div data-example="2">data-example"2"</div>
Пример применения свойств стилей к элементу дома:
Атрибут data и и стили с равно.
Атрибут "data" может быть чему то равен, например:
Или:
Это иногда требуется, если невозможно или проблематично использовать классы для стилизации.
Для данного атрибута со значением можно использовать любые значения, но по написанию, вы наверное догадались о чем идет речь:
CSS :
В данных примерах, все кроме "data" - являются переменными(т.е. изменяемыми)
[data-display=none] {
display: none;
}
[data-display=block] {
display: block;
}

подробнее.
подробнее.