23

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Abhimanyu
  • 441
  • 1
  • 4
  • 11
  • @j08691 I don't think that's what this question is asking. – TylerH Sep 03 '14 at 14:18
  • 2
    You add the inline style to paragraph tags. I do not think you can target child selectors with inline styles – Huangism Sep 03 '14 at 14:19
  • 1
    @TylerH 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. – dfsq Sep 03 '14 at 14:20
  • 2
    Don't use inline styles. – MrUpsidown Sep 03 '14 at 14:20
  • 1
    @dfsq not with js as the question is not tagged with it but the answer is still no as you have mentioned – Huangism Sep 03 '14 at 14:21
  • Oh, so I can't. Just wanted to know that. Would someone post this as an answer? – Abhimanyu Sep 03 '14 at 14:22
  • 1
    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 @dfsq '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. – TylerH Sep 03 '14 at 14:24
  • @Abhimanyu you can post an answer by yourself or just delete the question – Huangism Sep 03 '14 at 14:57

3 Answers3

18

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • @Dawar Husain: Those aren't inline styles. That's an internal stylesheet. Two completely different things. – BoltClock Sep 03 '14 at 14:47
  • I am sorry I thought you were talking about display attribute – The Pragmatick Sep 03 '14 at 14:48
  • 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 – The Pragmatick Sep 03 '14 at 15:01
  • @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 Sep 03 '14 at 15:07
  • @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. – BoltClock Sep 03 '14 at 15:11
  • I totally misinterpreted the question. Sorry for that. But what is the asker asking for? Isn't it this ? [link](http://codepen.io/anon/pen/xeIrj) He didn't specify inline pseudo styles, did he? he said inline style only for the containing div. – The Pragmatick Sep 03 '14 at 15:56
9

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.

Kevin Vess
  • 321
  • 1
  • 11
-5
li:nth-child(10n-2) {
    background: red;
}

This is the base for my source code!

clemens
  • 16,716
  • 11
  • 50
  • 65
Subraa PD
  • 1
  • 2