Стилизация элемента по атрибуту data

Как можно стилизовать элемент с атрибутом data, Стилизация элемента по атрибуту data изменить цвет текста с атрибутом "data", изменить размер элемента. И. т.д. в общем применить стили css к элементу с атрибутами data.

Стилизация data атрибута!

1. Изменение цвета текста в элементе с атрибутом data.
2. Как изменить размер текста в элементе с атрибутом data.
3. Атрибут data и display-none

Изменение цвета текста в элементе с атрибутом data.

Для того, чтобы изменить цвет в элементе Dom с атрибутом "data" нам понадобится:

Нужен элемент "дома", пусть это будет div :

<div>div</div>

В него помещаем атрибут data с произвольным именем и значением:

data-example1="1"

Далее нам потребуется один из способов "3 способа css" - возьмем style

<style>style</style>

И далее... как говорится дело в шляпе... прописываем стили для текста:

color: #f707da;

Соберем весь код вместе:

Css:

<style>

[data-example1] {

color: #f707da !important;

}

</style>

Html :

<div data-example1="1">data-example1="1"</div>

Смотрим на результат стилизации элемента с атрибутом data:

data-example1="1"



Как изменить размер текста в элементе с атрибутом 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-example"2"



Атрибут data и и стили с равно.

Атрибут "data" может быть чему то равен, например:

data-display="none"

Или:

data-display="block"

Это иногда требуется, если невозможно или проблематично использовать классы для стилизации.

Мы будем использовать данное свойство в блоке "DW HIDE & SHOW"

Для данного атрибута со значением можно использовать любые значения, но по написанию, вы наверное догадались о чем идет речь:

CSS :

В данных примерах, все кроме "data" - являются переменными(т.е. изменяемыми)

[data-display=none] {

display: none;

}

И:

[data-display=block] {

display: block;

}