Şimdiye kadar, bağlantılara bir göz attık ve sözde sınıflar oluşturduk. Bu yazıda, element durumlarına dalacağız.
Bunu yazı serisini bölümlere ayırdım. CSS Sözde Sınıflar konusu ile ilgili diğer bölümleri de aşağıdaki bağlantılarda bulabilirsiniz.
- Bağlantı Sözde Durumları
- Form Sözde Durumları
- Element Durum Seçicileri
- Diğer Sözde Durumlar
- Dil Bilimsel Durumlar
Öğe durumları, bir öğenin sahip olabileceği belirli bir durumu yansıtır. Bu, örneğin, türünün first-of-type (ilk örneği) yada last-child (son çocuk) olabilir.
Element durumu seçicileri
Öğe durum seçicileri, makalelerimde çok kullandığım sözde sınıflardır. Belirli bir eşleşen öğeyi seçmek ve belirli bir stil uygulamak için harika bir yoldur.
Aşağıdaki seçenekleri inceliyoruz:
:first-child:last-child:only-child:first-of-type:last-of-type:nth-child:nth-of-type:only-of-type:empty
:first-child, :last-child, & :only-child
İlk veya son öğelere belirli bir stil uygulamak istiyorsanız bunlar harikadır.
Örneğin, genellikle bir listedeki margin değerini dengelemek için kullanılırlar.
Basit bir şey deneyelim ve ilk ve son öğelerin renklerini değiştirelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <style> li:first-child { color: hotPink; } li:last-child { color: teal; } </style> </head> <body> <ul> <li>Elma</li> <li>Armut</li> <li>Kayısı</li> <li>Portakal</li> <li>Kiraz</li> </ul> </body> </html> |
Çıktısı:
Ve tek çocuk için aşağıdaki seçiciyi kullanabiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> li:only-child { color: crimson; } </style> </head> <body> <ul> <li>Elma</li> </ul> </body> </html> |
Bunları sırayla kullanırken dikkatli olun. Üçüne de sahipseniz,:only-child teknik olarak ilk ve son çocuk seçici için de geçerlidir!
:first-of-type & :last-of-type
Bunlar yukarıdakilere çok yakındır, ancak belirgin bir fark vardır.
Örneğin, birinci çocuk, öğenin seçicideki ilk öğe olması için gereklidir. Türün ilki olarak, o öğenin ilk oluşumunu biçimlendirir.
Bunu göstermenin en kolay yolu, ilk güçlü öğenin diğerlerinden daha kalın olmasını istediğimiz bir HTML yapısına sahip olmaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <style> div > strong:first-child { color: hotPink; } div > strong:first-of-type { color: purple; font-size: 1.5rem; } </style> </head> <body> <div> <p>Üst Satır</p> <strong>Kalın Yazı</strong> <p>Satır İki</p> <strong>Diğer kalın yazı</strong> <p>Son Satır</p> </div> </body> </html> |
İlk güçlü olanın pembe değil mor olduğunu görebileceksiniz çünkü bu ateşlenmeyecek!
Not: Hatta türünün ilk satırını deneyip kaldırabilirsiniz.
Ve aynısı last-of-type ile de yapılabilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <style> div > strong:last-child { color: gold; } div > strong:last-of-type { color: crimson; } </style> </head> <body> <div> <p>Üst Satır</p> <strong>Kalın Yazı</strong> <p>Satır İki</p> <strong>Diğer kalın yazı</strong> <p>Son Satır</p> </div> </body> </html> |
nth-child & nth-of-type
Bir elementin belli bir sırasındaki element yada elementleri seçmek için kullanılabilir. Tek başına bir yazı konusu olabileceği gibi burada basit bir şekilde ele alınacaktır.
Örneğin, ikinci öğeye stil verebilirsiniz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <style> .kutu:nth-child(2){ background-color: #000; color:#fff; } </style> </head> <body> <div class="sayfa"> <div class="kutu">1</div> <div class="kutu">2</div> <div class="kutu">3</div> <div class="kutu">4</div> <div class="kutu">5</div> <div class="kutu">6</div> <div class="kutu">7</div> <div class="kutu">8</div> <div class="kutu">9</div> <div class="kutu">10</div> </div> </body> </html> |
Bu seçicinin harika yanı, yalnızca bir statik değere sahip olmamasıdır. Aşağıdaki gibi değerleri kullanabilirsiniz:
odd/even: Tek ve Çift olan elementleri seçer.2n+2: 2.sıradan sonraki her 2.öğeyi seçer.
Örnek 1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <style> .kutu:nth-child(odd){ background-color: #000; color:#fff; } </style> </head> <body> <div class="sayfa"> <div class="kutu">1</div> <div class="kutu">2</div> <div class="kutu">3</div> <div class="kutu">4</div> <div class="kutu">5</div> <div class="kutu">6</div> <div class="kutu">7</div> <div class="kutu">8</div> <div class="kutu">9</div> <div class="kutu">10</div> </div> </body> </html> |
Örnek 2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <style> .kutu:nth-child(3n+5){ /*5. sıradan başlayarak 3er atlayarak seçer*/ background-color: #000; color:#fff; } </style> </head> <body> <div class="sayfa"> <div class="kutu">1</div> <div class="kutu">2</div> <div class="kutu">3</div> <div class="kutu">4</div> <div class="kutu">5</div> <div class="kutu">6</div> <div class="kutu">7</div> <div class="kutu">8</div> <div class="kutu">9</div> <div class="kutu">10</div> </div> </body> </html> |
Örnek 3:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <style> .kutu:nth-child(3n-2){ /*3. sıradan -2 geri giderek 3ün katlarına uygular.*/ background-color: #000; color:#fff; } </style> </head> <body> <div class="sayfa"> <div class="kutu">1</div> <div class="kutu">2</div> <div class="kutu">3</div> <div class="kutu">4</div> <div class="kutu">5</div> <div class="kutu">6</div> <div class="kutu">7</div> <div class="kutu">8</div> <div class="kutu">9</div> <div class="kutu">10</div> </div> </body> </html> |
Ve yine, ilk öğeler yerine türleri hedeflemek için n’inci tür seçiciyi kullanabiliriz. Bu, örneğin oluşumlarına göre sola/sağa olmasını istiyorsanız, görüntüler için çok yararlı olabilir.
only-of-type
Bu oldukça komik bir durum. Seçici bir türden yalnızca biriyse etkinleşir.
Tek çocuğun yalnızca bir çocuğu olabileceği yerde, bu öğenin bu çocuktan yalnızca 1 tane sahip olup olmadığını söyleyebilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <style> .sayfa > p:only-of-type { color: hotPink; } </style> </head> <body> <div class="sayfa"> <div class="kutu">1</div> <p>2</p> <div class="kutu">3</div> </div> </body> </html> |
:empty
Sonuncusu boş seçicidir. Boş öğeleri belirtmek için kullanılabilir.
Hatta bazı insanlar bunu yanlış yerleştirilmiş öğeleri bulmanın bir yolu olarak kullanır.
Bunu, boş p etiketleri ekleyen WYSIWYG düzenleyicilerini kullanırken de kullanabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <style> .sayfa > div:empty { height: 10px; background-color: palevioletred; margin:1px; } </style> </head> <body> <div class="sayfa"> <div>1</div> <div></div> <div>3</div> <div>4</div> <div></div> <div>6</div> <div></div> <div></div> <div>9</div> <div>10</div> </div> </body> </html> |
Çok teşekkür ederim