CODEWITHSUNDEEP
htmlcsscss-selectorsparent-child
Zanic L3
Zanic L3

Reputation: 1088

Select a second <strong> in a <p> tag?

<p><strong>Lorem ipsum dolor sit amet,</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>
<p><strong>This one</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>

Is it possible to select the 'This one' text, the second <p><strong> and give that a margin-top? Or is it not possible? I tried playing around with p>strong:nth-child(2) but to no avail.

I know there are empty <p>'s inside but that's also the case on the real site as I have no control over the HTML (stuck in CMS / user input)

Upvotes: 1

Views: 1177

Answers (2)

pistevw
pistevw

Reputation: 432

You could target the second strong:s parent (if the number won't change):

p:nth-of-type(7) strong {
   // your css rules
}

Upvotes: 0

Johannes
Johannes

Reputation: 67778

If your goal is to create a margin-top for every strong tag inside a p tag except the first p, you can use :not in the following way:

(note that you have to define it as inline-block - otherwise margin-top won't apply.

p:not(:first-of-type)>strong {
  display: inline-block;
  margin-top: 30px;
  color: red;
}
<p><strong>Lorem ipsum dolor sit amet,</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>
<p><strong>This one</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>

Upvotes: 3

Related Questions