nth-child() or first-child? jak wybrać pierwsze i drugie dziecko w jednym

Question

Chciałbym wybrać dwa pierwsze elementy listy na liście nieuporządkowanej. Mogę wybrać pierwszą pozycję w następujący sposób:

ul li:nth-child(1) a { 
    background: none repeat scroll 0 0 beige; 
} 

LUB

ul li:first-child a { 
    background: none repeat scroll 0 0 beige; 
} 

chciałbym wybrać zarówno pierwszy jak i drugi element liniowy - jak to zrobić?

Answer 1

Bez użycia js lub :nth-child (które zdaniem nie jest obsługiwana w IE)

ul li:first-child, ul li:first-child + li { 
    list-style: none; 
} 

Here jest demo testowane IE7

Answer 2

Działa to w IE9 +, ale nie jest najkrótsza. Selektor @ BoltClock jest najkrótszym rozwiązaniem dla IE9 +. Myślę, że ten margines jest łatwiejszy do zrozumienia, więc zostawię to jako alternatywę.

ul li:first-child a, ul li:nth-child(2) a 
{ 
    background: none repeat scroll 0 0 biege; 
} 

Answer 3

Najlepszym rozwiązaniem dla kompatybilności z różnymi przeglądarkami byłoby użycie jQuery i przypisanie klasy do elementu listy.

• http://api.jquery.com/eq-selector/
• http://api.jquery.com/index/

Coś ...

$(function() { 

$('li').each(function() { 
    if($(this).index() == 1 || $(this).index() == 2) { 
    $(this).addClass('first_or_second'); 
    } 
}); 

}); 

Answer 4

do wybierania pierwszych i drugich dzieci, można użyć jednego :nth-child() pseudo-klasę tak:

ul li:nth-child(-n+2) a { 
    background: none repeat scroll 0 0 beige; 
} 

Answer 5

.trJobStatus ul{ 
 
    width: 500px; 
 
    height:500px; 
 
    float: left; 
 
    } 
 
.trJobStatus ul li{ 
 
    width: 50px; 
 
    height:50px; 
 
    border: solid 1px #ddd; 
 
    list-style:none; 
 
    display: inline-block; 
 
    text-align: center; 
 
    line-height:50px; 
 
    font-size:25px; 
 
    } 
 

 
.trJobStatus ul li:nth-child(1), 
 
.trJobStatus ul li:nth-child(5){ 
 
    color:red; 
 
    }

 
    <div class="trJobStatus"> 
 
    <ul> 
 
<li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    </ul> 
 
</div>

.trJobStatus ul li: nth-child (1), .trJobStatus ul li: nth-child (2) { kolor: #fff; background-color: #ddd; }