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

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

Примеры:

1. В данном примере селектор соответствует любому элементу h1, который является первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри элемента div: div > h1:first-child { text-indent:50px }

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

   <div> <h1> Первый заголовок в div. Имеет отступ первой строки. </h1> <h1> Второй заголовок в div. Не имеет отступа. </h1> </div>

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

   <div> <p> Параграф внутри div. </p> <h1>Первый заголовок в div. Не имеет отступа. </h1> </div>

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

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

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

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

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

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