Menu
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?
313
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
The :nth-child() is a CSS pseudo-class selector that allows you to select elements based on their index (source order) inside their container. You can pass in a positive number as an argument to :nth-child() , which will select the one element whose index inside its parent matches the argument of :nth-child() .
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
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.
155
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
