CSS2 - Псевдо-класс :first-child

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

Примеры:

1. В данном примере селектор соответствует любому элементу h1, который является первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри элемента div:

2. div h1:first-child

3. {

4. text-indent:50px

}

Этот селектор будет соответствовать первому параграфу внутри div в следующем коде:

<div>

<h1>

Первый заголовок в div.

Имеет отступ первой строки.

</h1>

<h1>

Второй заголовок в div.

Не имеет отступа.

</h1>

</div>

но он не будет соответствовать параграфу в следующем коде HTML:

<div>

<p>

Параграф внутри div.

</p>

<h1>Первый заголовок в div.

Не имеет отступа.

</h1>

</div>

1. В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div:

6. div:first-child strong

7. {

8. font-style: italic

}

В следующем коде HTML strong является первым потомком элемента div:

<div>Изучайте -- <strong>язык программирования</strong> C++.</div>

1. В данном примере селектор соответствует любому элементу b, который является первым потомком любого элемента, и задает text-decoration как none:

10. b:first-child

11. {

12. text-decoration: none

}

В следующем примере первый элемент b в коде HTML ниже является первым потомком параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым потомком параграфа и будет подчеркнут:

<p>

Посетите <b>www.intuit.ru</b> и выучите CSS!

Посетите <b><a href="http://www.intuit.ru">www.intuit.ru</a></b> и выучите HTML!

</p>