Doğru seçicileri kullanarak stil uygulamak, kodların verimli ve bakımı kolay olmasını sağlar.
Temel Seçiciler
- Etiket Seçicisi (Type Selector): HTML etiket adını kullanarak öğeleri seçer. Örneğin: p { color: blue; } tüm paragrafları mavi yapar. Temel stil uygulamak, genel görünümü kontrol etmek için kullanılır.
- Sınıf Seçicisi (Class Selector): HTML öğesinin class özniteliğini kullanarak öğeleri seçer. Örneğin: .highlight { background-color: yellow; } class=”highlight” olan tüm öğelerin arka plan rengini sarı yapar. Aynı stili birden fazla öğeye uygulamak için idealdir. Tekrarı önler ve kodun okunabilirliğini artırır.
- ID Seçicisi (ID Selector): HTML öğesinin id özniteliğini kullanarak tek bir öğeyi seçer. Örneğin: #header { font-size: 24px; } id=”header” olan öğenin yazı boyutunu 24px yapar. Sayfada benzersiz olması gereken öğeleri hedeflemek için kullanılır (örneğin, ana başlık, navigasyon menüsü). ID’ler sadece bir kez kullanılmalıdır.
İlişkisel Seçiciler
- Çocuk (Child) Seçici: Bir öğenin doğrudan alt öğelerini seçer. Örneğin: div > p { font-weight: bold; } bir <div> içindeki tüm <p> öğelerinin yazı stilini kalın yapar (> sembolü çocuk ilişkisini gösterir.). Belirli bir yapıda bulunan öğeleri hedeflemek için kullanılır.
- Torun (Descendant) Seçici: Bir öğenin içindeki tüm torun öğelerini seçer (doğrudan alt öğeler dahil). Örneğin: div p { color: red; } bir <div> içindeki tüm <p> öğelerinin rengini kırmızı yapar (Boşluk sembolü torun ilişkisini gösterir.). Daha geniş kapsamlı stil uygulamak için kullanılır.
- Kardeş (Sibling) Seçiciler:
- Ardışık Kardeş (+): Bir önceki öğenin hemen sonraki kardeşini seçer. Örneğin: h2 + p { margin-top: 0; } bir <h2> etiketinden hemen sonra gelen <p> öğesinin üst marjinini sıfırlar.
- Genel Kardeş (~): Bir önceki öğenin aynı üst öğeye sahip tüm sonraki kardeşlerini seçer. Örneğin: h2 ~ p { color: green; } bir <h2> etiketinden sonra gelen ve aynı üst öğeye sahip olan tüm <p> öğelerinin rengini yeşil yapar.
Evrensellik Seçicisi
* sembolü ile temsil edilir. Sayfadaki tüm öğeleri seçer. Örneğin: * { margin: 0; padding: 0; } sayfanın tüm öğelerinin marjin ve padding değerlerini sıfırlar. Nadiren kullanılır, genellikle varsayılan stilleri sıfırlamak veya genel bir stil uygulamak için kullanılır. Aşırı kullanımı önerilmez çünkü performansı olumsuz etkileyebilir.
Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS