Style a List Item element only when the parent element has a specific class-CodePudding

I am not new to CSS, and I know there is a simple solution to this, but I just cannot find it anywhere (I am drawing a blank on the solution).

I have the following code:

<p >
  blablabla, some text here!

  <ol>
    <li >
      <p >Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</p>
<p >
  <ol>
    <li >
      <p >Non-Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</p>

I want to add the rule "color:red" to only the list items in the ordered list within the paragraph element with the class of "paragraph" (So only the first Ordered List).

I have tried...

.paragraph ol li{color:red;}

.paragraph, ol, li{color:red;}

The second one works; however, it also styles the other OL element as well!

Thanks in advance!

CodePudding user response：

The reason this isn't working is because paragraph elements cannot contain other block elements.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

If you inspect the resulting html, you will see the <p> tag is automatically closed before the <ol>, so your css rule no longer applies.

CodePudding user response：

I suggest you do the following (as a variant)

.paragraph p,
.paragraph a:link,
.paragraph a:visited {
  color: red;
}

<div >
  blablabla, some text here!
  <ol>
    <li >
      <p >Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</div>
<div >
  <ol>
    <li >
      <p >Non-Related Articles</p>
    </li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
    <li><a href="/">ArticleName</a></li>
  </ol>
</div>