CODEWITHSUNDEEP
css
Johny
Johny

Reputation: 63

How can i select the div from CSS?

I want to select the div of following order:

div3,div4
div7,div8
div11,div12
div15,div16
and so on....

I was wondering, how can i achieve this order by nth child property of CSS? Please help!!!

Upvotes: 1

Views: 75

Answers (3)

Suraj Mevada
Suraj Mevada

Reputation: 129

Use following: 

div:nth-child(4n-1){} /* for 3,7,11,15... */

div:nth-child(4n){} /* for 4,8,12,16... */

Snippet Below: 

div:nth-child(4n-1){
    background: red;
}
div:nth-child(4n){
    background: green;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>

Upvotes: 4

dsaket
dsaket

Reputation: 1896

In CSS,

div:nth-child(4n+3),
div:nth-child(4n+4){
   /*do something*/
}

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 115332

Without knowing your structure it's hard to be definitive but the nth-of-type selectors can help here.

div:nth-of-type(4n+3) {  /* every 4th div starting at 3 */
  background: red;
}
div:nth-of-type(4n+4) {  /* every 4th div starting at 4 */
  background:blue;
}

JSfiddle Demo

Upvotes: 5

Related Questions