CSS Dilinde CSS Seçicilerin Kullanımı

CSS (Cascading Style Sheets) içerisinde, web sayfalarındaki HTML elementlerini hedeflemek ve bu elementlere stil kuralları uygulamak için kullanılan temel mekanizma seçiciler (selectors) olarak adlandırılır. Seçiciler, belirli bir kritere uyan bir veya daha fazla elementi seçmek için güçlü ve esnek yöntemler sunar. Bu doküman, CSS seçicilerinin sözdizimini, çeşitli türlerini ve pratik kullanım örneklerini detaylı bir şekilde açıklamaktadır.

Temel Sözdizimi

Bir CSS kural seti, bir seçici ve bir bildirim bloğundan oluşur. Temel sözdizimi aşağıdaki gibidir:

selector {
    property: value;
    property: value;
}

Burada;

• selector: Stil kurallarının uygulanacağı HTML elementini veya elementlerini belirler.

• property: Uygulanacak stilin özelliğini (örneğin, color, font-size, margin) tanımlar.

• value: Özelliğe atanacak değeri (örneğin, red, 16px, 10px) belirtir.

Detaylı Açıklama

CSS seçicileri, elementleri farklı kriterlere göre hedeflemek için çeşitli türlerde mevcuttur:

1. Tip (Element) Seçiciler

Belirli bir HTML element tipini seçer. Örneğin, tüm

elementlerini hedeflemek için kullanılır.

p {
    color: blue;
}

2. Kimlik (ID) Seçiciler

Belirli bir elementin id özelliğini kullanarak tek bir elementi hedefler. ID'ler bir sayfada benzersiz olmalıdır ve seçici # karakteri ile başlar.

#ana-baslik {
    font-size: 24px;
}

3. Sınıf (Class) Seçiciler

Birden fazla elemente uygulanabilen bir sınıfı hedefler. Seçici . karakteri ile başlar.

.vurgulu-metin {
    font-weight: bold;
}

4. Evrensel (Universal) Seçici

Sayfadaki tüm HTML elementlerini seçer. * karakteri ile temsil edilir.

* {
    margin: 0;
    padding: 0;
}

5. Nitelik (Attribute) Seçiciler

Belirli bir HTML niteliğine sahip veya belirli bir nitelik değerine sahip elementleri seçer.

• [attribute]: Belirtilen niteliğe sahip tüm elementleri seçer (örneğin, [title]).

• [attribute="value"]: Belirtilen niteliğe ve değere sahip elementleri seçer (örneğin, [type="text"]).

• [attribute~="value"]: Niteliğin değer listesinde belirtilen kelimeyi içeren elementleri seçer (boşlukla ayrılmış kelimeler için).

• [attribute^="value"]: Niteliğin değeri belirtilen dize ile başlayan elementleri seçer.

• [attribute$="value"]: Niteliğin değeri belirtilen dize ile biten elementleri seçer.

• [attribute*="value"]: Niteliğin değeri belirtilen dizeyi herhangi bir yerinde içeren elementleri seçer.

a[target="_blank"] {
    color: green;
}

6. Pseudo-class Seçiciler

Elementlerin belirli bir durumunu veya konumunu hedef alır. Örneğin, bir bağlantının üzerine gelindiğinde (:hover) veya bir listenin ilk elemanı (:first-child).

a:hover {
    text-decoration: underline;
}
li:first-child {
    font-weight: bold;
}

7. Pseudo-element Seçiciler

Bir elementin belirli bir bölümünü stilize etmek için kullanılır. Genellikle :: çift iki nokta üst üste ile belirtilir (örneğin, ::before, ::after, ::first-line, ::first-letter).

p::first-line {
    font-variant: small-caps;
}

8. Kombinatörler (Combinators)

İki veya daha fazla seçiciyi birleştirerek elementler arasındaki ilişkileri (ebeveyn-çocuk, kardeş vb.) temel alarak daha karmaşık seçimler yapmayı sağlar.

• Torun Seçici (Descendant Selector) (boşluk): Bir elementin içindeki (torunu olan) tüm elementleri seçer. Örnek: div p.

• Çocuk Seçici (Child Selector) (>): Bir elementin doğrudan çocuğu olan elementleri seçer. Örnek: div > p.

• Bitişik Kardeş Seçici (Adjacent Sibling Selector) (+): Aynı ebeveyn elementine sahip olan ve ilk elementten hemen sonra gelen ikinci elementi seçer. Örnek: div + p.

• Genel Kardeş Seçici (General Sibling Selector) (~): Aynı ebeveyn elementine sahip olan ve ilk elementten sonra gelen tüm ikinci elementleri seçer. Örnek: div ~ p.

div p { /* div içindeki tüm p etiketleri */
    margin-bottom: 10px;
}
ul > li { /* ul'nin doğrudan çocukları olan li etiketleri */
    list-style-type: square;
}

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, farklı seçici türlerinin nasıl kullanıldığını göstermektedir:

Örnek 1: Temel Seçicilerin Kullanımı

HTML:

Makale Başlığı
Bu, makalenin giriş paragrafıdır.
Bu ise normal bir paragraftır.
Bu da bir span etiketi.

CSS:

#ana-baslik {
    color: #333;
    text-align: center;
}
.giris-paragrafi {
    font-style: italic;
    color: #555;
}
p {
    line-height: 1.6;
}

Örnek 2: Kombinatörler ve Pseudo-class

HTML:

    
Bu, container içindeki ilk paragraf.
    

        
Öğe 1
        
Öğe 2
        
Öğe 3
    
    
Bu, container içindeki ikinci paragraf.

Bu, container dışındaki bir paragraf.

CSS:

.container p { /* .container içindeki tüm p etiketleri */
    border-left: 3px solid blue;
    padding-left: 10px;
}
.container ul > li:first-child { /* .container içindeki ul'nin ilk li çocuğu */
    background-color: lightyellow;
}
a:hover { /* Tüm a etiketlerinin üzerine gelindiğinde */
    color: red;
    text-decoration: none;
}

Önemli Notlar

• Özgüllük (Specificity): Birden fazla CSS kuralı aynı elementi hedeflediğinde, daha özgül (specific) olan seçici kazanır. ID seçiciler sınıf seçicilerden, sınıf seçiciler ise tip seçicilerden daha özgüldür.

• Performans: En performanslı seçiciler ID ve sınıf seçicilerdir. Evrensel seçiciler (*) ve torun seçiciler (div p) tarayıcılar için daha fazla işlem maliyeti getirebilir.

• Seçici Zincirleme: Aynı elemente birden fazla seçici uygulayabilirsiniz. Örneğin, p.warning hem

  etiketi hem de warning sınıfına sahip elementleri seçer.

• Grup Seçiciler: Aynı stil kurallarını birden fazla seçiciye uygulamak için virgül (,) kullanarak seçicileri gruplayabilirsiniz. Örnek: h1, h2, h3 { color: navy; }.

• !important Kullanımından Kaçınma: Özgüllük sorunlarını çözmek için !important kullanmak, CSS kodunuzu yönetmeyi zorlaştırır ve genellikle kötü bir pratik olarak kabul edilir. Daha iyi bir seçici veya daha iyi bir mimari tercih edilmelidir.