web-dev-qa-db-fra.com

nième enfant () ou premier enfant? comment choisir premier ET deuxième enfant en un

J'aimerais sélectionner les deux premiers éléments d'une liste non ordonnée. Je peux sélectionner le premier article ainsi:

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

OR

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

J'aimerais sélectionner à la fois les premier et deuxième postes - comment puis-je le faire?

htmlcsscss-selectors
26
Doug Fir

Sans l'utilisation de js ou de :nth-child (qui, à mon avis, n'est pas pris en charge dans IE)

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

Ici est une démo testée dans IE7

42
T I

Pour sélectionner les premier et deuxième enfants, vous pouvez utiliser une seule pseudo-classe :nth-child() comme ceci:

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

Cela fonctionne dans IE9 + mais ce n'est pas le plus court. Le sélecteur @ BoltClock est la solution la plus courte pour IE9 +. Je pense que celui-ci est légèrement plus facile à comprendre, je vais donc le laisser comme alternative.

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

Votre meilleur choix pour la compatibilité entre navigateurs serait d’utiliser jQuery et d’affecter une classe à l’élément de la liste.

Quelque chose comme...

$( function() {

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

});
3
sethasaurus

.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: nième enfant (1), .trJobStatus ul li: nième enfant (2) { couleur: #fff; couleur d'arrière-plan: #ddd; }

0
shabudeen shaikh