Nested many li and p under an ul, nested under a div. How to make JUST the li into bold?

HTML-CSS
1

Hello good camper :slight_smile:

I am trying to make all (and JUST) my li which is nested together with my p (there are many li and p) under an ul which is nested under a div, into bold.

Is there any way to do it with out adding li > class=“bold”; into each of my li elements? I have created bellow CSS for the case mentioned in this line
.bold {text-weight: bold;}

Is there any other way to do it? or a more efficient way to create it.

Appreciate any clue, reading materials or enlightenment.

Thanks in advance

Nadia

sample of my HTML:

> <div>
>   <ul>
>   <li>Early years (1975–1978)</li> 
<p>Steve Harris, Dave Murray and Doug Sampson had a successful audition for a singer to complete band’s new line up. Paul Di’Anno was chosen in 1978 after a meeting in Red Lion pub in Leytonstone in November 1978.</p>
>   <li>Record contract and early releases (1978–1981)</li> 
<p>On New Year's Eve 1978, Iron Maiden recorded a demo, at Spaceward Studios in Cambridge. In December 1979, Adrian Smith joined the group as second guitarist. Iron Maiden's 1980 release, Iron Maiden, debuted at No. 4 in the UK Albums Chart. In 1981, Iron Maiden released their second album, Killers.</p>
>   </ul>
> </div>
2

Hi,

You can do div > li { font-weight: bold; }

I think using p as a direct child of a ul is wrong. You can put p tag inside li, however.

3

The p should be inside the li: only li elements can be direct children of an ul.

<ul>
  <li>
    <h1>Early years (1975–1978)</h1>
    <p>Steve Harris, Dave Murray and Doug Sampson had a successful audition for a singer to complete band’s new line up. Paul Di’Anno was chosen in 1978 after a meeting in Red Lion pub in Leytonstone in November 1978.</p>
  </li>
  <li>
    <h1>Record contract and early releases (1978–1981)</h1>
    <p>On New Year's Eve 1978, Iron Maiden recorded a demo, at Spaceward Studios in Cambridge. In December 1979, Adrian Smith joined the group as second guitarist. Iron Maiden's 1980 release, Iron Maiden, debuted at No. 4 in the UK Albums Chart. In 1981, Iron Maiden released their second album, Killers.</p>
  </li>
</ul>

And give each subtitle a class, eg class="subtitle" and you can style all the subtitles at once.

Also, using <section> rather than ul/li is possibly more appropriate.

<main>
  <header>
    <h1>Iron Maiden<h1>
    <h2>The Beast in Numbers</h2>
  </header>
  <section>
    <h1>Early years (1975–1978)</h1>
    <p>Steve Harris, Dave Murray and Doug Sampson had a successful audition for a singer to complete band’s new line up. Paul Di’Anno was chosen in 1978 after a meeting in Red Lion pub in Leytonstone in November 1978.</p>
  </section>
  <section>
    <h1>Record contract and early releases (1978–1981)</h1>
    <p>On New Year's Eve 1978, Iron Maiden recorded a demo, at Spaceward Studios in Cambridge. In December 1979, Adrian Smith joined the group as second guitarist. Iron Maiden's 1980 release, Iron Maiden, debuted at No. 4 in the UK Albums Chart. In 1981, Iron Maiden released their second album, Killers.</p>
  </section>
</main>

Think of it like you’re writing an essay, or a Word document, structure stuff in the same way