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

html css inline-styles
Abhimanyu picture Abhimanyu · Sep 3, 2014 · Viewed 29.7k times · Source

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

BoltClock picture BoltClock · Sep 3, 2014

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.

Related questions

How to write a:hover in inline CSS?

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor. How can I use a:hover in inline CSS inside the HTML style attribute? E.g. you can't …

Read More
Using CSS :before and :after pseudo-elements with inline CSS?

I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements. If so, how would I implement something like this …

Read More
CSS Pseudo-classes with inline styles

Is it possible to have pseudo-classes using inline styles? Example: <a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> I know the above HTML won't work but is there something similar that will? …

Read More