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?

Cyanotype

@j08691 I don't think that's what this question is asking. – Cook

You add the inline style to paragraph tags. I do not think you can target child selectors with inline styles – Tribromoethanol

@Cook This is exactly what OP is asking: how to apply pseudo class to element with javascript. And the answer is no, it's not possible. – Evoke

Don't use inline styles. – Copyread

@Evoke not with js as the question is not tagged with it but the answer is still no as you have mentioned – Tribromoethanol

Oh, so I can't. Just wanted to know that. Would someone post this as an answer? – Cyanotype

I think it's still unclear, but isn't he just asking if he can use in-line (in the HTML document) styles on the div, and use CSS nth-child selectors on the div's child p elements to override the inline styles? In which case, the answer is still no (see Huangism's first comment), but @Evoke 's comment is totally unrelated to the question at hand; OP didn't make a single mention of JS (where'd you get that from?) and already showed a correct application of pseudo classes. – Cook

@Cyanotype you can post an answer by yourself or just delete the question – Tribromoethanol

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.

Pathan

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

I am sorry I thought you were talking about display attribute – Phrixus

I think @Cyanotype 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 – Phrixus

@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. – Pathan

@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. – Pathan

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. – Phrixus

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.

Jovanjove

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

Was looking for a way to set up a dynamic CSS style while using React. Found this answer after a while. I believe this will do the job. Thanks. – Harryharsh

Answer 3

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

This is the base for my source code!

Returnee