Skip to content

Instantly share code, notes, and snippets.

@5t3ph
Last active January 25, 2022 04:06
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save 5t3ph/d44a1677d68cf86eb0683d5050a84692 to your computer and use it in GitHub Desktop.
Save 5t3ph/d44a1677d68cf86eb0683d5050a84692 to your computer and use it in GitHub Desktop.
Tag HTML elements with their class names and IDs to visualize page structure
*[class],
*[id] {
position: relative;
outline: 2px dashed red;
}
*[class]::before, *[class]::after,
*[id]::before,
*[id]::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 0.25em;
background-color: red;
color: #fff;
font-weight: normal;
font-family: sans-serif;
font-size: 0.9rem;
border: 1px solid #fff;
}
*[class][class]::before,
*[id][class]::before {
content: "." attr(class);
}
*[class][id]::after,
*[id][id]::after {
content: "#" attr(id);
right: 0;
left: auto;
background-color: blue;
}
*[class][id],
*[id][id] {
outline-color: blue;
}
*[class],
*[id] {
position: relative;
outline: 2px dashed red;
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 0.25em;
background-color: red;
color: #fff;
font-weight: normal;
font-family: sans-serif;
font-size: .9rem;
border: 1px solid #fff;
}
&[class]::before {
content: "." attr(class);
}
&[id]::after {
content: "#" attr(id);
right: 0;
left: auto;
background-color: blue;
}
&[id] {
outline-color: blue;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment