CSS Pseudo-classes (Yarı-eleman Sınıfları), HTML elemanlarını belirli durumlarına veya konumlarına göre hedeflememize olanak tanıyan güçlü bir CSS özelliğidir. Bu yazıda, bazı yaygın kullanılan CSS Pseudo-classes’leri inceleyeceğiz ve örnek kod blokları ile nasıl kullanıldıklarını göstereceğiz.
1. :hover Pseudo-class
:hover pseudo-class, bir elemanın üzerine gelindiğinde uygulanacak stil kurallarını belirler. Bu, genellikle bağlantıları vurgulamak veya kullanıcı etkileşimini göstermek için kullanılır.
a:hover {
color: #3498db; /* Mavi renk */
text-decoration: underline; /* Altı çizili */
}
2. :nth-child() Pseudo-class
:nth-child() pseudo-class, belirli bir sıradaki elemanları hedeflememizi sağlar. Örneğin, her ikinci çocuğu seçmek için kullanılabilir.
li:nth-child(2n) {
background-color: #ecf0f1; /* Gri arka plan */
}
3. :first-child ve :last-child Pseudo-classes
Bu pseudo-classes, sırasıyla bir elemanın ilk çocuğunu ve son çocuğunu hedeflemek için kullanılır.
li:first-child {
font-weight: bold; /* İlk çocuk kalın yazı tipi */
}
li:last-child {
color: #e74c3c; /* Son çocuk kırmızı renk */
}
4. :nth-of-type() Pseudo-class
Bu pseudo-class, belirli bir eleman tipindeki belirli sıradaki elemanları hedeflememizi sağlar.
p:nth-of-type(odd) {
background-color: #f39c12; /* Sarı arka plan */
}
5. :not() Pseudo-class
:not() pseudo-class, belirli bir seçimi hariç tutmamıza olanak tanır. Aşağıdaki örnekte, “menu” sınıfına sahip olmayan li elemanları seçilir.
li:not(.menu) {
border: 1px solid #2ecc71; /* Yeşil kenarlık */
}
Sonuç: Pseudo-classes İle Güçlü ve Esnek Stil Kontrolü
CSS Pseudo-classes, HTML elemanlarına daha hassas ve esnek bir şekilde stil uygulamamıza olanak tanır. Bu örnekler, bu pseudo-classes’lerin nasıl kullanılacağını anlamanıza yardımcı olacak ve projelerinizde daha etkili ve düzenli bir stil kontrolü sağlayacaktır.