Blog Kategorileri

Son Eklenen Konular

Css seçiciler child örneği
Resim

Css seçicileri hakkında bir çok makale bulmak mümkün. Genel anlamda class ve id kullanımları örneklenmiş, bende bu konuyu bilgim dahilinde biraz genişletmek istedim.

Kısa kısa örnekler ile devam edeyim.


css

	.navmenu > li:first-child{
		border-left:1px solid #e3e3e3;
		  -webkit-border-bottom-left-radius: 4px;
				  border-bottom-left-radius: 4px;
		  -webkit-border-top-left-radius: 4px;
				  border-top-left-radius: 4px;
		  -moz-border-radius-bottomleft: 4px;
		  -moz-border-radius-topleft: 4px;
	}
	.navmenu > li:last-child{
		  -webkit-border-top-right-radius: 4px;
				  border-top-right-radius: 4px;
		  -webkit-border-bottom-right-radius: 4px;
				  border-bottom-right-radius: 4px;
		  -moz-border-radius-topright: 4px;
		  -moz-border-radius-bottomright: 4px;			
		}


yukardaki örneğimde .navmenu isimli css clasım içerisinde bulunan li taglarına sesleniyorum HTML örneğinide altta bakabiliriz.

html

<ul class="navmenu">
   <li><a href="#">Ben ilk li tagıyım</a>
     <ul class="navmenusub">
         <li><a href="#">benim stillemem yok</a></li>
         <li><a href="#">benim stillemem yok</a></li>
         <li><a href="#">benim stillemem yok</a></li>
         <li><a href="#">benim stillemem yok</a></li>
      </ul>
   </li>
   <li><a href="#">Ben arada kalan li tagıyım</a></li>
   <li><a href="#">Ben arada kalan li tagıyım</a></li>
   <li><a href="#">Ben son li tagıyım</a></li>
</ul>

Burada yapmak istediğim olay



Oluşturacağım menüdeki ilk ve son li taglarının köşelerini yuvarlatmak diğerlerininde normal bırakmak .

Css kodlarımı açıklarsam   >  şeklinde li den önce gelen seçici dikkatinizi çekmiş olabilir bunun amacı .navmenu  clasımın içerisinde bulunan ilk li taglarını işleme almak istediğimi belirtiyor, varsayıyorum li taglarının içerisinde ul ve li şeklinde taglarda varsa yani li içerisindeki li tagları bu seçimin dışında bırakmış oluyorum. örnek html kodumdaki .navmenusub şeklinde olan class ın içindeki li ler bu stillemeye dahil değiller.

 

:first-child  sayesinde .navmenu içerisindeki bulunan ilk li tagıgına stilleme yaparak sol kenarlarına border-radius uyguluyorum. örnek HTML kodundaki ilk li haricindeki diğer li tagları bu stillemeye dahil olmuyor.

:last-child de aynı :first-child gibi ama tam tersi şeklinde en son li tagına stilleme yapmamı sağlıyor.

comments powered by Disqus