Çocuk seçici, yalnızca belirli bir öğenin doğrudan çocukları olan öğeleri seçer. Boşluk seçiciden daha spesifiktir.
Genel kardeş seçici, aynı ebeveyne sahip olan ve belirtilen öğeden sonra gelen tüm kardeş öğeleri seçer.
Sözde sınıflar, bir öğenin belirli bir durumunu veya konumunu hedeflemenizi sağlar. Bu, kullanıcı etkileşimlerine veya belgedeki yapısal konuma göre stil uygulamanız için çok güçlü bir mekanizmadır.
öğelerine kenarlık ekler.
Sözde Eleman Seçiciler: Öğelerin Bölümlerini Hedefleme
Sözde elemanlar, bir öğenin belirli bir bölümünü veya öğenin içine sanal içerik eklemenizi sağlayan özel seçicilerdir. Çift iki nokta üst üste (::) ile belirtilirler.
::before ve ::after
Bu sözde elemanlar, seçilen öğenin içeriğinden önce veya sonra sanal içerik eklemek için kullanılır. Genellikle dekoratif öğeler, ikonlar veya metin eklemek için kullanılırlar.
p::before {
content: "➡️ ";
color: #007bff;
}
h3::after {
content: "";
display: block;
width: 50px;
height: 2px;
background-color: #007bff;
margin-top: 5px;
}
content özelliği, ::before ve ::after ile kullanılması zorunlu olan tek özelliktir. Boş bırakmak isterseniz content: ""; kullanabilirsiniz.
::first-line ve ::first-letter
Bu sözde elemanlar, bir metin bloğunun ilk satırını veya ilk harfini hedeflemek için kullanılır.
p::first-line {
font-weight: bold;
color: #333;
}
p::first-letter {
font-size: 2em;
float: left;
margin-right: 5px;
}
::first-line için yalnızca belirli CSS özellikleri (font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height) uygulanabilir. ::first-letter için ise daha fazla özellik kullanılabilir.
::selection
::selection, kullanıcı tarafından seçilen (vurgulanan) metnin stilini değiştirmek için kullanılır.
::selection {
background-color: #007bff;
color: white;
}
Bu, web sitenizdeki metin seçildiğinde arka plan rengini mavi, metin rengini beyaz yapar.
Nitelik Seçiciler: Niteliklere Göre Hedefleme
Nitelik seçiciler, HTML öğelerinin sahip olduğu niteliklere (attribute) ve bu niteliklerin değerlerine göre hedefleme yapmanızı sağlar. Bu, form öğeleri, resimler veya özel veri nitelikleri gibi durumlarda çok kullanışlıdır.
Tam Eşleşme ([attr="value"])
Belirli bir niteliğe ve tam olarak o değere sahip öğeleri seçer.
input[type="text"] {
border: 1px solid #ccc;
padding: 8px;
}
a[target="_blank"] {
color: #28a745;
}
İçeren Değer ([attr*="value"])
Nitelik değeri içinde belirtilen alt dizgiyi içeren öğeleri seçer.
img[alt*="logo"] {
border: 2px solid #007bff;
}
Bu, alt niteliği "logo" kelimesini içeren tüm resimlere kenarlık ekler.
Başlangıç Değeri ([attr^="value"])
Nitelik değeri belirtilen alt dizgiyle başlayan öğeleri seçer.
a[href^="https://"] {
color: green;
}
Bu, https:// ile başlayan tüm bağlantıları yeşil yapar.
Bitiş Değeri ([attr$="value"])
Nitelik değeri belirtilen alt dizgiyle biten öğeleri seçer.
a[href$=".pdf"] {
font-weight: bold;
}
Bu, .pdf ile biten tüm bağlantıları kalın yapar.
Boşlukla Ayrılmış Kelime ([attr~="value"])
Nitelik değeri, boşlukla ayrılmış kelimelerden biri olarak belirtilen kelimeyi içeriyorsa öğeyi seçer.
[class~="warning"] {
background-color: #fff3cd;
color: #856404;
}
Bu, class="message warning" gibi bir sınıfa sahip öğeleri seçer.
Tire ile Ayrılmış Kelime ([attr|="value"])
Nitelik değeri, belirtilen kelimeyle tam olarak eşleşiyorsa veya tire (-) ile ayrılmış bir liste içinde başlıyorsa öğeyi seçer. Genellikle dil nitelikleri (lang) için kullanılır.
[lang|="en"] {
font-style: italic;
}
Bu, lang="en" veya lang="en-US" gibi öğeleri seçer.
Gelişmiş Seçici Kombinasyonları ve Özellikleri
Seçicileri tek tek kullanmak yerine, onları birleştirerek çok daha spesifik hedeflemeler yapabilirsiniz. Ancak bu, CSS'in önemli bir kavramı olan "özgüllük" (specificity) kavramını da beraberinde getirir.
Birden Fazla Seçiciyi Birleştirme (Virgül ,)
Birden fazla seçiciye aynı stil kurallarını uygulamak istediğinizde, seçicileri virgülle ayırarak listeleyebilirsiniz.
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.card, .widget {
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
}
Özellik (Specificity) Kavramı
Bir öğeye birden fazla CSS kuralı uygulanmaya çalıştığında, hangi kuralın kazanacağını belirleyen mekanizmaya özgüllük denir. Özgüllük, bir puanlama sistemi gibi çalışır:
- Inline Stiller: En yüksek özgüllük (1,0,0,0).
- ID Seçiciler: Yüksek özgüllük (0,1,0,0).
- Sınıf Seçiciler, Nitelik Seçiciler, Sözde Sınıflar: Orta özgüllük (0,0,1,0).
- Tip Seçiciler, Sözde Elemanlar: Düşük özgüllük (0,0,0,1).
- Evrensel Seçici: En düşük özgüllük (0,0,0,0).
Daha yüksek puanlı seçici her zaman kazanır. Eşit puan durumunda, CSS dosyasında daha sonra tanımlanan kural kazanır.
/* Özgüllük: (0,0,1,0) */
.my-paragraph {
color: blue;
}
/* Özgüllük: (0,0,0,1) */
p {
color: red;
}
/* metni mavi olacaktır. */
!important Kullanımı ve Sakıncaları
!important anahtar kelimesi, bir stil kuralının özgüllüğünü diğer tüm kuralların üzerine çıkararak en yüksek önceliği vermesini sağlar. Ancak, bu kullanımı genellikle kaçınılması gereken bir uygulamadır çünkü:
- CSS'in doğal özgüllük akışını bozar.
- Bakımı zorlaştırır ve hata ayıklamayı karmaşık hale getirir.
- Daha sonraki stillerin üzerine yazılmasını imkansız hale getirebilir.
.my-element {
color: green !important; /* Tüm diğer renk kurallarını geçersiz kılar */
}
Genellikle, !important yerine daha spesifik seçiciler yazmak veya CSS mimarinizi yeniden gözden geçirmek daha iyi bir yaklaşımdır.
En İyi Uygulamalar ve Performans
Etkili CSS seçiciler yazmak, yalnızca öğeleri doğru hedeflemekle kalmaz, aynı zamanda kodunuzun okunabilirliğini, bakımını ve web sitenizin performansını da etkiler.
Seçici Karmaşıklığını Azaltma
Çok uzun ve karmaşık seçicilerden kaçınmak, hem okunabilirlik hem de performans açısından önemlidir. Tarayıcılar, seçicileri sağdan sola doğru okur. Bu nedenle, seçicinin en sağındaki kısım ne kadar spesifikse, tarayıcının eşleşen öğeleri bulması o kadar hızlı olur.
/* Kötü örnek: Çok genel bir başlangıç */
div.container ul li a { ... }
/* Daha iyi örnek: Daha spesifik bir başlangıç */
.main-nav__item-link { ... }
ID ve Sınıf Seçicilerini Etkin Kullanma
* ID'ler: Sayfada tek ve benzersiz olması gereken ana düzen öğeleri veya JavaScript ile etkileşime girecek belirli öğeler için kullanın.
* Sınıflar: Tekrar kullanılabilir stil blokları oluşturmak için ana tercihiniz olmalıdır. Bir öğeye birden fazla sınıf atayarak esnek stiller oluşturabilirsiniz.
Performans İpuçları
- Evrensel seçiciden kaçının:
* seçicisi her öğeyi etkilediği için performans düşüşüne neden olabilir.
- Nitelik seçicileri dikkatli kullanın: Özellikle
[attr*="value"] gibi kısmi eşleşmeler, tarayıcıların tüm DOM'u taramasını gerektirebilir.
- Gereksiz yere torun seçicileri derinleştirmeyin:
div div div p gibi seçiciler yerine, mümkünse daha spesifik sınıflar kullanın.
- CSS'i optimize edin: Gereksiz stilleri kaldırın ve CSS dosyalarınızı sıkıştırın.
Sonuç
CSS seçiciler, web geliştirme yolculuğunuzda ustalaşmanız gereken temel ve güçlü araçlardır. Bu makalede ele aldığımız temel, kombinatör, sözde sınıf, sözde eleman ve nitelik seçicileri anlayarak ve doğru bir şekilde kullanarak, HTML belgelerinizdeki öğeleri inanılmaz bir hassasiyetle hedefleyebilir, daha düzenli, okunabilir ve bakımı kolay CSS kodları yazabilirsiniz. Özgüllük kavramını anlamak ve en iyi uygulamaları takip etmek, performanslı ve sürdürülebilir web siteleri oluşturmanız için kritik öneme sahiptir. Seçicilerde ustalaşmak, web tasarımlarınıza hayat veren stil kurallarını yazarken size tam kontrol sağlayacaktır.
Sıkça Sorulan Sorular (SSS)
- S: CSS seçiciler neden önemlidir?
- C: CSS seçiciler, HTML belgesindeki belirli öğeleri seçerek onlara stil kuralları uygulamanızı sağlar. Bu sayede web sayfalarınızın görünümünü kontrol edebilir, görsel tutarlılık sağlayabilir ve kullanıcı deneyimini iyileştirebilirsiniz.
- S: ID seçici ile sınıf seçici arasındaki temel fark nedir?
- C: ID seçici (
#id), bir HTML belgesinde yalnızca bir kez kullanılması gereken benzersiz bir öğeyi hedefler. Sınıf seçici (.class) ise birden fazla öğeye atanabilir ve tekrar kullanılabilir stil blokları oluşturmak için idealdir. Özgüllük açısından ID seçiciler daha yüksek önceliğe sahiptir.
- S:
!important kullanmak ne zaman uygun olabilir?
- C:
!important kullanımı genellikle kaçınılması gereken bir uygulamadır. Ancak, çok nadiren ve geçici çözümler olarak, örneğin geliştirme sırasında hızlı testler yapmak veya dışarıdan gelen bir kütüphanenin stilini geçersiz kılmak gibi durumlarda kullanılabilir. Uzun vadeli ve sürdürülebilir projelerde kullanımı önerilmez.
- S: Sözde sınıflar ve sözde elemanlar arasındaki fark nedir?
- C: Sözde sınıflar (
:hover, :nth-child gibi), bir öğenin belirli bir durumunu (örneğin fare üzerine gelme) veya konumunu (örneğin ilk çocuk olma) hedefler. Sözde elemanlar (::before, ::first-line gibi) ise bir öğenin belirli bir bölümünü hedefler veya öğenin içeriğine sanal içerik ekler. Sözde sınıflar tek iki nokta üst üste (:), sözde elemanlar ise çift iki nokta üst üste (::) ile yazılır.
