How do I target all paragraphs inside a given DIV beside the first one using the :nth-child
operator?
:nth-child(/* select all but the first one */) {
color: green;
}
<div>
<p>Example 1</p>
<p>Example 2</p>
<p>Example 3</p>
<p>Example 4</p>
<p>Example 5</p>
<p>Example 6</p>
<p>Example 7</p>
</div>
This selector is used to select every element which is not the first-child of its parent element. It is represented as an argument in the form of :not(first-child) element.
When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.
The :nth-child(odd) property will target every other item of the element you have selected.
Definition and Usage. 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.
You can use the following formula:
:nth-child(n+1)
or for some browsers:
:nth-child(n+2)
W3Schools says:
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
Link
Or you can use separate :first-child
CSS declaration for this first element.
use
p:nth-child(n+2) {
color: green;
}
working DEMO
Reference
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