CSS ID Seçicisi Ayrıntısı

ID seçicisi, elementlerden bağımsız bir şekilde stil belirlemeyi sağlar.

CSS ID Seçicisi

Bazı yönlerden, ID seçicisi klas seçicilerine benzer, ancak bazı önemli farklar da vardır.

Sözdizimi

Öncelikle, ID seçicisi önünde bir # işareti vardır - bu da tahta işareti veya sondalama işareti olarak bilinir.

Aşağıdaki kurallara göz atın:

*#intro {font-weight:bold;}

Klas seçicisi gibi, ID seçicisinde genel seçici göz ardı edilebilir. Önceki örnekte de aşağıdaki gibi yazılabilir:

#intro {font-weight:bold;}

Bu seçicinin etkisi aynı olacaktır.

İkinci fark, ID seçicisi class özelliğinin değerini değil, kesinlikle id özelliğindeki değeri referans alır.

Aşağıda, gerçek bir ID seçicisinin bir örneği verilmiştir:

<p id="intro">Bu, bir giriş paragrafıdır.</p>

Kendi deneyiminizi yapın

Klas seçicisi hala ID seçicisi mi?

Klas seçicileri bölümünde, herhangi bir elemente sınıf tanımlayabileceğimizi açıkladık. Geçen bölümde important adlı sınıf, p ve h1 elementlerine uygulandı ve daha fazla elemente de uygulanabilir.

Fark 1: Belgede sadece bir kez kullanılabilir

Klas gibi, bir HTML belgesinde, ID seçicisi bir kez ve sadece bir kez kullanılır.

Fark 2: ID kelime listesi kullanılamaz

Klas seçicilerine kıyasla, ID seçicileri bir araya getirilemez, çünkü ID özelliği boşlukla ayrılmış kelime listelerine izin vermez.

Fark 3: ID daha fazla anlam içerebilir

Klassla benzer şekilde, ID'ler elementlerden bağımsız olarak seçilebilir. Bazı durumlarda, belgede belirli bir ID değeri olacağını biliyorsunuz, ancak hangi elementte olacağını bilmiyorsunuz, bu yüzden bağımsız ID seçicisini belirtmek istiyorsunuz. Örneğin, belirli bir belgede mostImportant ID değeri taşıyan bir element olacağını biliyorsunuz. Bu en önemli şeyin bir paragraf, bir ifade, bir liste öğesi veya bir bölüm başlığı olacağını bilmiyorsunuz. Sadece her belgede bu en önemli içeriğin herhangi bir elementte bulunabileceğini ve sadece bir kez bulunabileceğini biliyorsunuz. Bu durumda, aşağıdaki gibi bir kural yazabilirsiniz:

#mostImportant {color:red; background:yellow;}

Bu kural, aşağıdaki tüm elementlerle eşleşecektir (bu elementler aynı ID değeri paylaşır, bu yüzden aynı belgede aynı zamanda bulunamaz):

<h1 id="mostImportant"Bu önemlidir!
<em id="mostImportant"Bu önemlidir!
<ul id="mostImportant">Bu önemli!</ul>

Kişisel olarak deneyin:

Büyük/Küçük Harf Duyarlı

Lütfen, sınıf ve ID seçicilerinin büyük/küçük harf duyarlı olabileceğini unutmayın. Bu, belgenin dili ile ilgilidir. HTML ve XHTML, sınıf ve ID değerlerini büyük/küçük harf duyarlı olarak tanımlar, bu yüzden sınıf ve ID değerlerinin büyük/küçük harfi, belgedeki ilgili değerlerle uyumlu olmalıdır.

Bu yüzden, aşağıdaki CSS ve HTML için element kalın olmayacak:

#intro {font-weight:bold;}
<p id="Intro">Bu, bir giriş paragrafıdır.</p>

Harf i'nin büyük/küçük harf farkı nedeniyle seçici, yukarıdaki elementlerle eşleşmez.