I am currently learning CSS and I have a question that may seem basic or silly, but I can't seem to find the answer anywhere. Here is the CSS code I am working with:
#table-of-contents ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
#table-of-contents ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
#table-of-contents ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
#table-of-contents li ol > li {
margin: 0;
}
#table-of-contents li ol > li:before {
content: counters(item, ".") " ";
}
My question is, is there a way to simplify this code by writing the #table-of-contents selector only once, similar to the following:
#table-of-contents {
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
}
Is it possible to achieve something like this in CSS?