Css first-child ve + kullanımı

Arkadaşlar bu paylaşım sitesinden size css hakkında elimden geldiğince bilgilendirmeye çalışacağım.

Html ve css kullanan arkadaşlar bilir ilk nesne, ortadaki nesne veya son nesne’yi yer, renk veya aklınıza gelecek herhangi bir stil katmak her zaman zor olmuştur. Ben bu yazımda sizlere bunu açıklamaya çalışacağım.

Öncelikle First-Child Özelliğimiz

Bu özellik css de 1. demektir. Yani birinci <li>, <p>, <b>, <a> veya aklınıza gelicek herhangi bir tagın birincisi üzerinde değişiklik yapmamızı saglar.

Örnekler verelim

<ul>

<li>Birinci Yazı</li>

<li>İkinci Yazı</li>

<li>Üçüncü Yazı</li>

<li>Dördüncü Yazı</li>

<li>Beşinci Yazı</li>

</ul>

Bu şekilde bir listemiz olsun

buna css ekleyelim

<style type=”text/css”>

li:first-child {list-style-type:none}
li:first-child {background:blue;}
li:first-child {text-decoration:underline}
li:first-child {color:red}
li:first-child {width:100px;}

</style>

Bu kodda ilk <li> tagına uygulamalar yaptık. arkaplanı mavi, alt çizgi, yazı rengini kırmızı, uzunluğunu 100px gibi özellikler verdik bu örnekler çoğalabilir.

<p>Ali Evdi</p>

p:first-child {font-size:20px;}

Gibi örnekler olabilir.

Şimdi de “+” özelliğimize geldi sıra

Bu özellik çok az kullanılan ama en etkili özelliktir. Artı burada bir sayma aracı gibidir. yani li + li + li demek 3. sıradaki li’ ye uygulanacak stiller demektir.

Yine üsteki listemiz elimizde olsun 5 satırlık bir listemiz var ama biz sadece 5. satıra stil uygulamak istiyoruz. Bunun için aşagıdaki kod geçerlidir.

li + li + li + li + li {background:red}

yukarıdaki kod 5. sıradaki <li> satırının arka planını kırmızı yapmamızı sağlar.

li + li + li + li {font-weight:bold}

bu kod ise 4. ve 5. satırın yazı stillerini kalınlaştırır. Yani sondan eksilen her <li> bir sonrakini de alarak gelir.

Umarım yardımcı olabilmişimdir. anlatımım zayıfsa affola zamanla oturacaktır. Yinede yardıma ihtiyacınız olursa sorunları buradan yazabilirsiniz.

Google

Paylaş