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

Question

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

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

ИЛИ

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

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

Answer 1

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

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

Here демонстрационный протестирован в IE7

Answer 2

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

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

Answer 3

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

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

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

$(function() { 

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

}); 

Answer 4

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

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 ул li: nth-child (1), .trJobStatus ul li: nth-child (2) { Цвет: #fff; background-color: #ddd; }