Чтобы добавить CSS к <div> с определённым data атрибутом, можно использовать селектор атрибутов в вашем CSS-файле. Вот как это сделать:
div[data-container="outer"] {
/* Ваши CSS стили */
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
/* Добавьте другие стили по необходимости */
}Объяснение
div[data-container="outer"]: Этот селектор нацелен на любой элемент<div>, у которого есть атрибутdata-containerсо значением"outer".- Внутри фигурных скобок
{}можно определить любые CSS-свойства, которые вы хотите применить к этому элементу.
Пример
Вот пример, который добавляет стили к вашему <div>:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Стилизация Div</title>
<style>
div[data-container="outer"] {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div data-container="outer">
Это стилизованный div!
</div>
</body>
</html>В этом примере <div> с атрибутом data-container="outer" будет иметь светло-серый фон, рамку и отступы. Текст внутри <div> будет выровнен по центру.
