I’ve got another question I did not find in answer to. I am trying to display the id of each div in my site to visualize the nesting. This is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="frame">
<div id="header">
<div id="navigation"></div>
</div>
<div id="mainContent">
<div id="sidebarLeft">
<div id="calendar"></div>
</div>
<div id="article"></div>
<div id="sidebarRight"></div>
</div>
<div id="footer">
<div id="siteInfo"></div>
</div>
</div>
</body>
<style>
#frame {
display: flex;
flex-direction: column;
height: 100vh;
}
#mainContent {
flex: 1;
background: blue;
}
#header {
height: 64px;
background: red;
}
#header::after{
content:"#header";
color: white;
}
#footer {
height: 64px;
background: green;
}
div[id]{border: 1px solid red;
padding: 5px;}
</style>
</html>
How Could I use javascript here to write the divs id in the divs css-after-content of each div, like I did it per hand in the #header-div?
Could just use css content: attr(id).
#frame {
display: flex;
flex-direction: column;
height: 100vh;
}
#mainContent {
flex: 1;
background: blue;
}
#header {
height: 64px;
background: red;
}
/*
#header::after{
content:"#header";
color: white;
}
*/
#footer {
height: 64px;
background: green;
}
/*
div[id]{border: 1px solid red;
padding: 5px;}
*/
/*REM: Show id*/
div[id]::after{
background: lime;
content: '#' '' attr(id);
color: white
}
/*REM: Show class*/
div[class]:not(id)::after{
background: aqua;
content: '.' '' attr(class);
color: white
}<div id="frame">
<div id="header">
<div id="navigation"></div>
</div>
<div id="mainContent">
<div id="sidebarLeft">
<div id="calendar"></div>
</div>
<div id="article"></div>
<div id="sidebarRight"></div>
</div>
<div id="footer">
<div id="siteInfo"></div>
<div class="siteClass"></div>
</div>
</div>There is no direct way of doing this but there are two ways you can do this
data-my-id="header" at for css of the after element use content: attr(data-my-id)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="frame" data-my-id="frame">
<div id="header" data-my-id="header">
<div id="navigation" data-my-id="navigation"></div>
</div>
<div id="mainContent" data-my-id="mainContent">
<div id="sidebarLeft" data-my-id="sidebarLeft">
<div id="calendar" data-my-id="calendar"></div>
</div>
<div id="article" data-my-id="article"></div>
<div id="sidebarRight" data-my-id="sidebarRight"></div>
</div>
<div id="footer" data-my-id="footer">
<div id="siteInfo" data-my-id="siteInfo"></div>
</div>
</div>
</body>
<style>
#frame {
display: flex;
flex-direction: column;
height: 100vh;
}
#mainContent {
flex: 1;
background: blue;
}
#header {
height: 64px;
background: red;
}
/* #header::after {
content: "#header";
color: white;
} */
#footer {
height: 64px;
background: green;
}
div[id] {
border: 1px solid red;
padding: 5px;
}
div[id]::after {
content: attr(data-my-id);
background-color: white;
color: black;
font-family: Arial, Helvetica, sans-serif;
padding: 2px 4px;
border: 1px solid black;
display: inline-block;
width: max-content;
}
</style>
</html>