10TL.NET

Orjinalini görmek için tıklayınız: CSS'te Child (Hedef Eleman) Özellikleri
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Merhaba Arkadaşlar,
Bugün ki CSS dersimiz de :nth Özelliklerini anlatacağım.

Kullanım kalıpadı:nth-özellik[varsa(elemanID)]

First Child İlk Eleman

Örnek:
Kod:
.kalibim {
  float: left;
  background: blue;
  width: 250px;
  height: 250px;
  margin-left: 10px;
  color: #FFF;
  font-family: 'Arial', Serif;
  text-align: center;
}

.kalibim:first-child {
  background: red;
}

Görüntü:
rJpP2V.png

HTML sayfamızda diyelim ki .kalip sınıfını 10 kere kullandık.

nth-child(ID) Hedef Eleman

Örnek:
Kod:
.kalibim {
  float: left;
  background: blue;
  width: 250px;
  height: 250px;
  margin-left: 10px;
  color: #FFF;
  font-family: 'Arial', Serif;
  text-align: center;
}

.kalibim:nth-child(2) {
  background: red;
}

Görsel:
XENOE0.png

Last-Child Son Eleman

Kod:
li {
  padding: 10px;
}

li:last-child {
  color: red;
}

Görsel:
Ma2q86.png

Yararlandığım kaynak:
Kod:
https://www.w3schools.com/cssref/sel_last-child.asp
https://developer.mozilla.org/tr/docs/Web/CSS/:last-child

Kolay gelsin.