Какие обходные пути существуют для псевдокласса `: first-child` в этом примере?

Question

У меня есть немного базового HTML ...

<div id="panel">
    <h3>abc</h3>
    <address>a</address>
    <address>b</address>
    <address>c</address>
</div>

... и CSS ...

#panel address:first-child {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

jsFiddle .

Я всегда имел в виду :first-child для обозначения первого потомка , что элемент (address в этом примере). В самом строгом смысле я понимаю, что первым ребенком будет элемент h3, но я всегда верил, что так оно и будет.

Согласно спецификации W3C , я ошибаюсь ...

Псевдокласс: first-child соответствует элементу, который является первым дочерним элементом некоторого другого элемента.

Есть ли обходной путь для выбора первого элемента address, не прибегая к изменению HTML (т.е. добавляя атрибут class или id)?

Если мне нужно изменить HTML, пусть будет так, но у меня в голове было, что я упустил что-то очевидное.

Answer 1

Есть ли обходной путь для выбора первого элемента адреса, не прибегая к изменению HTML?

#panel h3 + address {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

Answer 2

Вам необходимо :first-of-type:

#panel address:first-of-type { ...

Демонстрационная версия: http://jsfiddle.net/3ASFE/1/

(этот селектор не реализован в IE8 и ниже)

Answer 3

Я бы рекомендовал использовать псевдоселектор :nth-of-type вместо псевдоселектора :first-child в вашем случае.

#panel address:nth-of-type(1) {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

Answer 4

Я почти уверен, что вы не пропускаете ничего очевидного.

Поскольку вы собираетесь использовать CSS3 (с :first-child), вы можете обойти что-то подобное:

#panel *:not(address) + address {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

Однако есть ограничение: он выбирает каждый address тег, которому не предшествует другой тег address, поэтому, если у вас есть несколько <address>, чередующихся с другими тегами,это вам не поможет.

Вы также можете использовать nth-child, если точно знаете индекс DOM своих тегов:

#panel address:nth-child(2) {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

РЕДАКТИРОВАТЬ I 'Вы прошли справку Selectors Level 3 , и есть селектор nth-of-type:

#panel address:nth-of-type(1) {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

Звучит так, как вы хотели.