MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:first-of-type

This translation is in progress.

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

/* Selects the first <p> to appear inside a parent element
   regardless of its position inside the siblings */
p:first-of-type {
  color: red;
}

Not: Orijinal tanımında seçili elemanın bir üst seçicisi (parent) olması gerekliliği vardı. Seçiciler Seviye 4'ten itibaren artık gerekmiyor.

Sözdizimi

:first-of-type

Örnekler

Örnek 1: Temel ilk paragraf

Aşağıdaki HTML'i baz alalım:

<h2>Başlık</h2>

<p>Paragraf</p>

<p>Paragraf</p>

Ve CSS:

p:first-of-type {
  color: red;
}

Bu bize aşağıdaki sonucu verecek — sadece body içerisinde görünecek ilk paragraf elemanı olarak görünecek ilk paragrafın rengini kırmızı yapar:

Örnek 2: Evrensel seçici olarak..

This example shows how the universal selector is assumed when no simple selector is written.

Önce biraz HTML:

<div>
  <span>Bu ilk `span`!</span>
  <span>Ama bu `span` değil.</span>
  <span>Bu <em>element içinde `em`</em>!</span>
  <span>Ve bu da <span>element içinde `span`</span>!</span>
  <b>Bu `b` niteliği!</b>
  <span>This final `span` does not.</span>
</div>

Şimdi de CSS:

div :first-of-type {
  background-color: lime;
}

Sonuç şöyle görünecek:

Özellikler

Specification Status Comment
Selectors Level 4
The definition of ':first-of-type' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':first-of-type' in that specification.
Recommendation Initial definition.

Tarayıcı uyumluluğu

Özellik Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Temel destek 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
Özellik Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Temel destek 2.1 (Yes) 1.0 (1.9.1) 9.0 10.0 3.2

Şunlar da var

Document Tags and Contributors

 Contributors to this page: ceylanabdullah
 Last updated by: ceylanabdullah,