it-roy-ru.com

nth-child () или first-child? как выбрать первого и второго ребенка в одном

Я хотел бы выбрать первые два элемента списка в неупорядоченном списке. Я могу выбрать первый пункт таким образом:

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;
}

Я хотел бы выбрать как первую, так и вторую позицию - как мне это сделать?

26
Doug Fir

Без использования js или :nth-child (который, я считаю, не поддерживается в IE)

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

Здесь это демоверсия, протестированная в IE7

42
T I

Для выбора первого и второго потомков вы можете использовать один псевдокласс :nth-child(), например:

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

Это работает в IE9 +, но это не самое короткое. Селектор @ BoltClock - самое короткое решение для IE9 +. Я думаю, что это немного легче понять, поэтому я оставлю это как альтернативу.

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

Лучше всего для кросс-браузерной совместимости было бы использовать jQuery и назначить класс для элемента списка.

Что-то вроде...

$( 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: nth-child (1), .trJobStatus ul li: nth-child (2) { цвет: #fff; цвет фона: #ddd; }

0
shabudeen shaikh