如何在内联样式中添加nth-child（）样式？

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 ?

Answer 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.

Answer 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.

Answer 3

li:nth-child(10n-2) {
    background: red;
}

This is the base for my source code!