How to add nth-child() style in inline styling?

Question

How can I add a nth-child(n) declaration while applying inline styles to an element (which, obviously, contains multiple elements).

For example, suppose I have a div that contains three p elements.

The general stylesheet rules would go like this:

div p:nth-child(2) {
  color: blue;
}

But how can I still colour the second paragraph blue while applying an inline style to the containing div?

Solution 1

An inline style attribute only pertains to the element with the attribute. So for example, if you have a style attribute on a div, the styles will only apply to that div (inherited properties and conflicting styles notwithstanding). You cannot target a different element using an inline style attribute on another element.

Even if you apply a style attribute onto a p element, you can't make the inline styles apply conditionally based on a pseudo-class. See my answer to this question for why. However, if the markup is dynamically generated, you can control whether or not the style attribute gets printed in the first place using similar logic, but that is outside the scope of your question.

Solution 2

Assuming the reason you want to apply the nth-child(n) declaration as an inline style is because you can't edit the CSS file or don't want to; but rather you need to apply your styling directly on the page, you could try just adding a <style> tag next to the div in question:

<style>
  div.myContainer p:nth-child(2) {
    color: blue;
  }
</style>
<div class="myContainer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

I should note: this is not the ideal way to structure your code. Styles and HTML/content should be separated to create properly formatted and semantic markup.

Also, if you have to apply this styling in more than one place, it can become messy and/or inconsistent. However, I understand that sometimes you have to make exceptions depending on the project.

Comments

[BoltClock]

@Dawar Husain: Those aren't inline styles. That's an internal stylesheet. Two completely different things.

[The Pragmatick]

I am sorry I thought you were talking about display attribute

[The Pragmatick]

I think @Abhimanyu is asking for inline value of display attribute. Your interpretation of the question seems weird. Because he's asking for applying inline styles to containing div and his code snippet shows inline style for child of div (p) TylerH's interpretation seems acceptable

[BoltClock]

@Dawar Husain: Why do you keep talking about the display property? Who said anything about it? You seem to be the one misinterpreting the question - or worse, looking at the wrong one.

[BoltClock]

@Dawar Husain: If you're reading "inline style" as "display: inline", then I can assure you that it's your interpretation of the question that's weird, because I've never seen anyone conflate the two, ever.

[The Pragmatick]

I totally misinterpreted the question. Sorry for that. But what is the asker asking for? Isn't it this ? link He didn't specify inline pseudo styles, did he? he said inline style only for the containing div.

[Ortomala Lokni]

It's no more inline styling... but it does the job for debugging purpose.