CODEWITHSUNDEEP
htmlcsscss-selectors
MShack
MShack

Reputation: 652

Using nth-child to style mulitiple items

Can you use nth-child to style , not for odd, even but for various out of order items ?

I want to style 1,3,7,8 , so how would i do that ?

Demo http://jsfiddle.net/nTZrg/50/

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

Upvotes: 0

Views: 109

Answers (2)

James Daly
James Daly

Reputation: 1386

if it's random numbers I think you need javascript here's a jquery implementation http://jsfiddle.net/nTZrg/52/

 <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
 <li>7</li>
<li>8</li>
<li>9</li>
</ul>


var array = [1, 3, 7, 8]

for (i=0; i < array.length; i++) {
$('ul li').eq(array[i]).prev().addClass('blue')
}



 .blue {
     background-color:blue;
     color: white;
 }

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50189

Provided that 1,3,7,8 are random and not some sort of pattern it's fairly simple:

jsFiddle

ul li:nth-child(1),
ul li:nth-child(3),
ul li:nth-child(7),
ul li:nth-child(8){
    background-color:blue;
    color: white;
}

Upvotes: 4

Related Questions