Как выбрать n-й ребенок с css?

Question

Учитывая следующие HTML и CSS, я хочу выделить второй элемент в списке, используя псевдокласс класса nth-child. Как я могу изменить ниже, чтобы это сделать?

Fiddle: http://jsfiddle.net/jeljeljel/DHKj5/

HTML

<div id="topdiv"> 
    <div class="middlediv"> 
     <div>A</div> 
     <div>B</div> 
     <div>C</div> 
    </div> 
</div> 

CSS

.topdiv > div:nth-child(n+2) { 
    font-weight:bold; 
    font-color:red; 
} 

Answer 1

Demo

#topdiv .middlediv > div:nth-child(2) { 
    font-weight:bold; 
    color:red; 
} 

Вы должны использовать # для идентификатора и . для класса

Просто объяснить n+2 подберет все братья и сестры следующих 2-го элемента. Также > выберет только ближайшие дочерние элементы селектора соответствия.

Answer 2

Один из способов:

#topdiv > .middlediv div:nth-child(2) { 
color: olive; 
} 

http://jsfiddle.net/DHKj5/4/

.topdiv > div:nth-child(n+2)

не работает, потому что потомок дива вы пытаетесь стиль не дети, но вместо этого внуков из #topdiv и вы также использовал . на корневом div вместо # (который предназначен для таргетинга на ID элементов)

Подробнее: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Answer 3

Вы выбираете идентификаторы через # и классы с помощью .. С nth-child() вы можете просто передать индекс (с нуля) для него, чтобы выбрать элемент, вам нужно, в вашем случае 2

#topdiv .middlediv > div:nth-child(2) { 
    font-weight:bold; 
    color:red; 
} 

jsFiddle example