CSS :nth-child() Örnekleri

8 yorum

Daha önce mutlaka :nth-child() filtresini kullanmışsınızdır css yazarken. Ancak bu filtrenin bazı güzel ipuçları var, işimize yarayacak. Bu yazıda size hızlıca bunları göstermek istiyorum. Önce basit bir html yapısı kuralım;

<ul>
  <li>kutu 1</li>
  <li>kutu 2</li>
  <li>kutu 3</li>
  <li>kutu 4</li>
  <li>kutu 5</li>
  <li>kutu 6</li>
  <li>kutu 7</li>
  <li>kutu 8</li>
  <li>kutu 9</li>
  <li>kutu 10</li>
</ul>

<style>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul {
  overflow: hidden;
}
ul li {
  list-style: none;
  float: left;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>

Şimdi gelelim örneklerimize..

İlk 5’i seçmek (:nth-child(-n+5))

Burada 5 yerine kaç yazarsanız ilk o kadarı seçilecektir.

ul li:nth-child(-n+5) {
   background-color: yellow;
}

Son 5’i seçmek (:nth-child(n+6))

Burada dikkat etmeniz gereken son kaçı seçecekseniz her zaman bir fazlasını yazmanız.

ul li:nth-child(n+6) {
   background-color: yellow;
}

3 ile 8 aralığındakileri seçmek (:nth-child(n+3):nth-child(-n+8))

ul li:nth-child(n+3):nth-child(-n+8) {
   background-color: yellow;
}

3’er 3’er seçmek (:nth-child(3n))

Ayrıca odd ve even ile de kullanımı var. Her ikisini de aşağıda gösteriyorum.

ul li:nth-child(3n) {
   background-color: yellow;
}


Her 3’ü ama sadece çift olanlar olsun istersek. Yani her 3’ü seçecek ama çift olan 6. oluyor. Dolayısı ile 3. yü atlayacak 6’yı seçecek 9. yu atlayacak 12’yi seçecek.

ul li:nth-child(3n):nth-child(even) {
   background-color: yellow;
}


Tam tersinde ise tekleri seçecek. Yani 3’ü seçecek 6’yı atlayacak 9’u seçecek…

ul li:nth-child(3n):nth-child(odd) {
   background-color: yellow;
}

4. den başlayıp 3’er 3’er seçmek (:nth-child(3n+4))

Burada eğer 2. den başlayıp 4’er 4’er seçmesini isterseniz 4n+2 demeniz yeterli 🙂

ul li:nth-child(3n+4) {
   background-color: yellow;
}

Daha fazla örnek görmek isterseniz, şuraya bir gözatın: http://nthmaster.com/

Yorumlar (8)

Mustafa Zahid Efe demiş ki;

Eline sağlık abi, güzel bir ders olmuş ?

Tayfun Erbilen demiş ki;

@doğukan, olabilir tabi ki kardeşim. Fırsat buldukça bu tarz konuları da ele alacağım :)

doğukan demiş ki;

abi hep web sitesi dersleri gösterdin bize birde basit bir şekilde mobil uygulama nasıl yapacağımızı yada mobil uygulama işine nasıl başlayacağımızı öğretebilir misin?

Tayfun Erbilen demiş ki;

@Resul Günaydın, li'lere float verdiğim için ul'nin yüksekliği olsun diye overflow kullanıyorum :)

Resul Günaydın demiş ki;

Abi şimdi baştan seçmek için -n, sondan seçmek için n kullanıcaz anladığım kadarıyla. Birde de neden overflow:hidden kullanıyorsun bunu hala çözemedim :)

Numan Aydin demiş ki;

Güzel ve işe yarar açıklayıcı bir anlatım. Ağzına sağlık Tayfun kardeşim.

Abdulsamet ŞAHİN demiş ki;

"nth-child(3n) "bunu gördükten sonra javascript le bunu yapmaya uğraştıgım zamanları hatırlayıp kendime acaıdım :/

Doğukan Akgün demiş ki;

Bu çok iyi oldu abi saolasın.

Yorum Gönder