Background Border Classification Dimension Font Generated Content List and Marker Margin Outline Padding Positioning Table Text Pseudo-classes Pseudo-elements !important  

CSS2 - :first-child Pseudo-class


:first-child pseudo-class добавя специален стил на елемент, който е първо ниво на друг елемент.

Бележка: За да работи :first-child в IE. <!DOCTYPE> трябв да бъде деклариран.

В този пример, селекторът определя всеки p елемент, които е първо ниво на елемента div, и отмества първия параграф в div елемента:
div > p:first-child
{
text-indent:25px
}

Този селектор ще определи първия параграф в div в следния HTML:

<div>
<p>
Първи параграф в div.
Този параграф ще бъде отместен.

</p>
<p>
Втори параграф в div.
Този параграф няма да бъде отместен.
</p>
</div>

но няма да определи параграфа в този HTML:

<div>
<h1>Header</h1>

<p>
Първи параграф в div.
Този параграф няма да бъде отместен.
</p>
</div>
В този пример, селекторът определя всеки em елемент, които е първо ниво на елемента p, и настройва font-weight на удебелен за първия em в p елемента:
p:first-child em
{
font-weight:bold
}

Например, em в HTML по-долу е първо ниво на параграфа:

<p>I am a <em>strong</em> man.</p>
В този пример, селекторът определя всеки em елемент, които е първо ниво на всеки елемент, и настройва text-decoration на none:
a:first-child
{
text-decoration:none
}

Например, първото а в HTML по-долу е първо ниво на параграфа и няма да бъде подчертано. Но второто a в параграфа не е първо ниво на параграфа и ще бъде подчертано:

<p>
Visit <a href="http://help.designbyraro.com">Help</a>
and learn CSS!
Visit <a href="http://help.designbyraro.com">Help</a>
and learn HTML!
</p>
 
Copyright © 2007 RARO Design & Develop