nth-child () o primer hijo? cómo seleccionar el primer y segundo hijo en uno

Me gustaría seleccionar los primeros dos elementos de la lista en una lista desordenada. Puedo seleccionar el primer elemento de esta manera:

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

O

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

Me gustaría seleccionar tanto la primera como la segunda línea de pedido, ¿cómo hago eso?

Sin el uso de js o :nth-child (que creo que no es compatible con IE)

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

Aquí hay una demostración probada en IE7

Para seleccionar el primero y el segundo hijo, puede usar una única pseudo clase :nth-child() como esta:

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

Esto funciona en IE9 + pero no es el más corto. El selector @ BoltClock es la solución más corta para IE9 +. Creo que este es marginalmente más fácil de entender, así que lo dejo como una alternativa.

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

Su mejor apuesta para la compatibilidad entre navegadores sería usar jQuery y asignar una clase al elemento de la lista.

Algo como…

 $( function() { $('li').each( function() { if( $(this).index() == 1 || $(this).index() == 2 ) { $(this).addClass('first_or_second'); } }); }); 
 .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; } 
 
  • 1
  • 2
  • 3
  • 4
  • 5