Основы работы с CSS
CSS2 - Псевдо-класс :first-child
Псевдо-класс :first-child соответствует определенному элементу, который является первым потомком другого элемента.
Примеры:
- В данном примере селектор соответствует любому элементу 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>
- В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div: div:first-child strong { font-style: italic }
В следующем коде HTML strong является первым потомком элемента div :
<div>Изучайте -- <strong>язык программирования</strong> C++.</div>
- В данном примере селектор соответствует любому элементу 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>
