Yapısal sözde seçiciler: CSS3 ile birlikte gelen özelliklerden biri yapısal sözde seçiciler ile matematiksel işlemler yapılmaya başladı. Yapısal sözde seçicilerden bahsetmek istiyorum.
:nth-child() kullanımı
Bu özellik ile tek, çift veya istediğimiz sıradaki yapıya değer verebiliyoruz. Daha açıklayıcı olmak için örnekler ile alıştırma yapalım.
:nth-child(odd)
Odd ile kullandığımızda tek sayılı olan yapılara değerler verebiliyoruz. Örneğin bir listeleme yapalım ve listelememizin 1, 3 , 5 gibi tek olan sıralara değer verelim.
<ul> <li>Birinci sıra</li> <li>İkinci sıra</li> <li>Üçüncü sıra</li> <li>Dördüncü sıra</li> </ul> |
Bu listelememizin tek sayılı olanlarına değer verelim. Hemen css kodlarımıza gelelim ve css değerlerini verelim.
li:nth-child(odd){ color:red; } |
Yukarıdaki işlemimiz ile listemizin tek sıralarına yani 1 ve 3. sıralarına kırmızı renk verdik.
:nth-child(even)
Even ile kullandığımızda çift sayılı olan yapılara değerler verebiliyoruz. Örneğin bir listeleme yapalım ve listelememizin 2, 4 gibi çift olan sıralara değer verelim.
<ul> <li>Birinci sıra</li> <li>İkinci sıra</li> <li>Üçüncü sıra</li> <li>Dördüncü sıra</li> </ul> |
Bu listelememizin çift sayılı olanlarına değer verelim. Hemen css kodlarımıza gelelim ve css değerlerini verelim.
li:nth-child(even){ color:blue; } |
Yukarıdaki işlemimiz ile listemizin çift sıralarına yani 2 ve 4. sıralarına mavi renk verdik.
:nth-child(3)
Bu kullanım ile istediğimiz sıradaki yapılara değerler verebiliyoruz. Örneğin bir listeleme yapalım ve listelememizin 3. sırasına değer verelim.
<ul> <li>Birinci sıra</li> <li>İkinci sıra</li> <li>Üçüncü sıra</li> <li>Dördüncü sıra</li> </ul> |
Bu listelememizin 3. sırasına değer verelim. Hemen css kodlarımıza gelelim ve css değerlerini verelim.
li:nth-child(3){ color:green; } |
:last-child
Bu kullanım ile son sıradaya değerler verebiliyoruz. Örneğin bir listeleme yapalım ve listelememizin en son sırasına değer verelim.
<ul> <li>Birinci sıra</li> <li>İkinci sıra</li> <li>Üçüncü sıra</li> <li>Dördüncü sıra</li> </ul> |
Bu listelememizin son sırasına değer verelim. Hemen css kodlarımıza gelelim ve css değerlerini verelim.
li:last-child{ color:pink; } |
Gördüğünüz gibi 4. sıramıza yani son sıramıza pembe renk verdik.
:first-child
Bu kullanım ile ilk sıraya değerler verebiliyoruz. Örneğin bir listeleme yapalım ve listelememizin ilk sırasına değer verelim.
<ul> <li>Birinci sıra</li> <li>İkinci sıra</li> <li>Üçüncü sıra</li> <li>Dördüncü sıra</li> </ul> |
Bu listelememizin ilk sırasına değer verelim. Hemen css kodlarımıza gelelim ve css değerlerini verelim.
li:first-child{ color:orange; } |
Gördüğünüz gibi 1. sıramıza yani ilk sıramıza turuncu renk verdik.
