Основы работы с CSS

       

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>



Содержание раздела