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/
Bu çok iyi oldu abi saolasın.
“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 :/
Güzel ve işe yarar açıklayıcı bir anlatım. Ağzına sağlık Tayfun kardeşim.
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 🙂
@Resul Günaydın, li’lere float verdiğim için ul’nin yüksekliği olsun diye overflow kullanıyorum 🙂
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?
@doğukan, olabilir tabi ki kardeşim. Fırsat buldukça bu tarz konuları da ele alacağım 🙂
Eline sağlık abi, güzel bir ders olmuş ?