` because the structure of your HTML is such that all of the elements are enclosed by the topmost ``. Then you can target the heads with `.content > ol > li > span`.
Good luck,
Bob
---
### Author:  [@dculp](https://forum.pinegrow.com/u/dculp)
#### Post date: [March 5, 2022, 9:15pm UTC](https://forum.pinegrow.com/t/how-to-select-only-major-headings-in-list/6348/3 "2022-03-05T21:15:38Z")
> [@RobM](#):
>
> the structure of your HTML is such that all of the elements are enclosed by the topmost ``
Are you suggesting that there might be a more favorable structure? If so, could you provide a code snippet based on my example?
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [March 5, 2022, 9:22pm UTC](https://forum.pinegrow.com/t/how-to-select-only-major-headings-in-list/6348/4 "2022-03-05T21:22:36Z")
I think your structure is fine. It just means that when you target the topmost
-
---
### Author:  [@dculp](https://forum.pinegrow.com/u/dculp)
#### Post date: [March 6, 2022, 9:33am UTC](https://forum.pinegrow.com/t/how-to-select-only-major-headings-in-list/6348/5 "2022-03-06T09:33:11Z")
OK. However, if I understand correctly then I would have to add a `span` to each of the topmost li text (i.e., to Head1, Head2, Head3, etc.).
If this is correct then it means that all existing lists in every page would have be manually modified. I was hoping that my current css could be modified so that all existing lists would be automatically updated (no manual changes needed). The code in “Tried css” (above) would act on all existing lists in all pages; it just doesn’t give the result that I need. (In my original post, I shouldn’t have said, “In the example list, feel free to change the div names or add properties as needed.” Instead, only the css should have been allowed to change.)
The css problem seems to be with `li:nth-child(1)`. The result is shown below. (Note that I have added ` border: 1px solid grey;` to the css to show each extent of `li:nth-child(1)`.) Thus, `li:nth-child(1)` applies only to the first level of each heading group – e.g., it applies to “Subhead 1.1” since it is the first level below “Head” but doesn’t apply to “Subhead 1.2” or “Subhead 1.3” since these aren’t the first level below “Head”. Similarly, it applies to “Subhead 1.2.1” but not to “Subhead 1.2.2” or “Subhead 1.2.3”. Note the increased `margin-top` for each of the items with borders (sort of the desired result but applied to the wrong list items).
I think something similar to `li:nth-child(1)` should work but I don’t know what.
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [March 6, 2022, 10:25am UTC](https://forum.pinegrow.com/t/how-to-select-only-major-headings-in-list/6348/6 "2022-03-06T10:25:38Z")
Hmmm… I’ll think on it a little, but again, look at your HTML structure. Each of those that are targeted have an opening and closing `` tag on the same line. Only text in between. So it is a discrete child and you can change the contained text. Your topmost has an open `` before, text, other elements and then the closing ``. Everything between those tags is a single child of `.content`, not just the topmost text.
Cheers,
Bob
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [March 6, 2022, 10:39am UTC](https://forum.pinegrow.com/t/how-to-select-only-major-headings-in-list/6348/7 "2022-03-06T10:39:35Z")
AhhHaa! I thought about it the opposite way. After targeting the top-most li text you can target the ol that is the next descendent and “reset” it. So,
```auto
.content > ol > li {
margin-top: 0;
background-color: yellow;
}
.content > ol > li > ol {
margin-top: 1.0em;
background-color: transparent;
}
```
Not sure what the “normal” margin-top value should be. I think this will achieve what you want.
Bob
---
### Author:  [@dculp](https://forum.pinegrow.com/u/dculp)
#### Post date: [March 6, 2022, 6:30pm UTC](https://forum.pinegrow.com/t/how-to-select-only-major-headings-in-list/6348/8 "2022-03-06T18:30:03Z")
RobM –
That’s what I was looking for. I had to make two adjustments (see new css below) –
1. Added one more `li` in the second `.content`.
2. `margin-top` values were swapped between the first and second `.content`. This made the margins correct for the Head1, Head2, Head3.
Thanks.
===== New css =============================================================
```auto
.main-content .content ol li { /* for top-level headings */
margin-top: 1.0em;
/* the following are debugs */
background-color: yellow;
border: 1px solid grey;
}
.main-content .content ol li ol li { /* reset for first child and all sub-children */
margin-top: 0em;
/* the following are debugs */
background-color: red;
border: 1px solid green;
}
```
=========================================================================
Result with debug colors –
