How to select only major headings in list?

Beginners
1

From the following example list, I want to select only the major headings (Head1, Head2, Head3) for adjustment (change margin-top, background-color, etc). I want to do this with css so that all similar lists can have the same appearance. I think the answer may be something like the css below; however, it doesn’t select the correct headings.

3/6/2022 Edit – Ignore “In the example list, feel free to change the div names or add properties as needed.” Instead, only the css should be changed.

Pinegrow 6.4, Windows 10

Thanks,
Don C.

===== Tried “list_simple_2.css” ===================================================

.main-content .content li:nth-child(1) {
  margin-top: 1.0em; /* for demo; the default is 0 */
  background-color: yellow;
  border: 1px solid grey;
}

===== Example list =======================================================

<!doctype html>
<html lang="en" data-pgc-master="master.html">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width"/>

<link href="list_simple_2.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="main-content">
  <div class="content">
	<ol>
	  <li>Head1
	    <ol>
	      <li>Subhead 1.1</li>
	      <li>Subhead 1.2</li>
	        <ol>
	          <li>Subhead 1.2.1</li>
	          <li>Subhead 1.2.2</li>
	          <li>Subhead 1.2.3</li>
	        </ol>
	      <li>Subhead 1.3</li>
	        <ol>
	          <li>Subhead 1.3.1</li>
	          <li>Subhead 1.3.2</li>
	          <li>Subhead 1.3.3</li>
	        </ol>
	    </ol>
	  </li>

	  <li>Head2
	    <ol>
	      <li>Subhead 2.1</li>
	      <li>Subhead 2.2</li>
	      </ol>
	  </li>

	  <li>Head3
	    <ol>
	      <li>Subhead 3.1</li>
	      <li>Subhead 3.2</li>
	      </ol>
	  </li>
  </ol>
  </div>  
</div>
</body>
</html>
2

Hi @dculp,
I think you are going to have to surround each of the top headings with <span>Head1<span> because the structure of your HTML is such that all of the elements are enclosed by the topmost <li>. Then you can target the heads with .content > ol > li > span.
Good luck,
Bob

3

Are you suggesting that there might be a more favorable structure? If so, could you provide a code snippet based on my example?

4

I think your structure is fine. It just means that when you target the topmost

  • , you are also going to impact everything inside. Your structure is actually:

    <li>Head1<ol><li>Sub</li>...</li>

    Make sense? Adding the span gives you something specific to the topmost li text that you can target with CSS.
    Bob

    • 5

    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.

    image

    6

    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 <li> 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 <li> before, text, other elements and then the closing </li>. Everything between those tags is a single child of .content, not just the topmost text.
    Cheers,
    Bob

    7

    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,

    .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

    8

    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 =============================================================

    .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 –

    image