1

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 class="paragraph">
  blablabla, some text here!

  <ol>
    <li class="nobullet">
      <p class="bold">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 class="footer">
  <ol>
    <li class="nobullet">
      <p class="bold">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!

Greenreader9
  • 491
  • 4
  • 12

2 Answers2

1

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.

Conman_123
  • 471
  • 3
  • 9
1

I suggest you do the following (as a variant)

.paragraph p,
.paragraph a:link,
.paragraph a:visited {
  color: red;
}
<div class="paragraph">
  blablabla, some text here!
  <ol>
    <li class="nobullet">
      <p class="bold">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 class="footer">
  <ol>
    <li class="nobullet">
      <p class="bold">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>
Vladimir Bakulin
  • 92
  • 8