CSS псевдокласът :first-child (:първо-дете) указва всеки елемент, намиращ се на първо място в списък с елементи от едно и също ниво в структурата на документа. В имплементациите на CSS3, за да бъде селектиран елемента, той трябва да има родител. В CSS4 това не е нужно.

Правопис

:first-child

Примери

Пример 1

HTML

<div>
  <p>This p is styled, as it is a p, AND the first
     child in the div</p>
  <p>This p is not styled; it is not the first child!</p>
</div>

<div>
  <h2>This h2 is not styled; it is not a p!</h2>
  <p>This p is not styled; it is not the first child!</p>
</div>

CSS

p:first-child {
  color: lime;
  background-color: black; 
  padding: 5px;
}

Резултат

Пример 2 - с използване на UL

HTML

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

CSS

li{
  color:blue;
}
li:first-child{
  color:green;
}

Резултат

Спецификации

Specification Status Comment
Selectors Level 4
The definition of ':first-child' in that specification.
Working Draft Елементите няма нужда да имат родител за да бъдат селектирани.
Selectors Level 3
The definition of ':first-child' in that specification.
Recommendation Без промяна.
CSS Level 2 (Revision 1)
The definition of ':first-child' in that specification.
Recommendation Начална дефиниция.

Съвместимост на четците

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 4Edge Full support YesFirefox Full support 3IE Full support 7
Notes
Full support 7
Notes
Notes Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.
Notes In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the :first-child style isn't applied until the link loses focus.
Opera Full support 9.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9.5Safari iOS Full support 4Samsung Internet Android Full support Yes
Matches elements with no parentChrome Full support 57Edge ? Firefox Full support 52IE ? Opera Full support 44Safari ? WebView Android Full support 57Chrome Android Full support 57Edge Mobile ? Firefox Android Full support 52Opera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Вижте също

Етикети за документа и сътрудници

Допринесли за тази страница: venimus, kberov
Последно обновяване от: venimus,