Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to target all elements besides the first with nth-child?

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>
like image 720
Dzhuneyt Avatar asked Aug 30 '12 08:08

Dzhuneyt


People also ask

How do I select every child except first?

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.

How do you select all the elements except the last child?

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.

How do you target every other element in CSS?

The :nth-child(odd) property will target every other item of the element you have selected.

How do I target my next child in CSS?

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.


2 Answers

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.

like image 70
Dmytro Zarezenko Avatar answered Oct 22 '22 17:10

Dmytro Zarezenko


use

p:nth-child(n+2) {
    color: green;   
}

working DEMO

Reference

like image 22
diEcho Avatar answered Oct 22 '22 17:10

diEcho