CSS’de ID ve Class Nedir? Farkları Nelerdir?

HTML/XHTML belgelerinde içeriği tarif etmek için bazı yollara ihtiyaç duyarız. Bunun için <h1> , <p> ve <ul> elementleri çoğu zaman işimizi görecektir ancak bu temel etiketler, bütün sayfa elementlerinin veya yerleşim planlarının tamamını kapsamaz. İşte bu noktada Class (Sınıf) ve ID devreye girer. Örneğin <ul id=”nav“> kodu yalnızca “nav” ID’si ile tanımlı, sırasız listeyi hedef almamızı ve yalnızca o listeye özel değişiklik yapabilmemizi sağlarken <div class=”stil”> kodu, “stil” adı altında halihazırda belirlemiş olduğumuz stil kodlarını birden fazla nesneye uygulamamızı sağlar.

Peki ama bu ikisinin arasındaki fark nedir?

ID’ler Özgündür

Her elemente ait yalnızca tek bir ID olabilir. Aynı ID birden fazla element üzerinde kullanılırsa geçerliliğini yitirir.
Her sayfa, o ID’ye sahip elementten yalnızca bir tane barındırabilir.
ID’lerde, Class’ların aksine özel bir tarayıcı işlevi vardır. Bu işlev, örneğin “orneksite.com#yorumlar” şeklinde bir URL girildiğinde tarayıcının otomatik olarak “yorumlar” ID’sine sahip olan elementin yerini bulup sayfayı o elementi gösterecek şekilde kaydırmasını sağlar.

#box
{
   color:blue;
   text-align:left;
   font-size:100%;
}

<p id="box">Metin</p>

Yukarıdaki şekilde “box” isimli ID’ye atadığımız stil özelliklerini p elementine uygulamış oluyoruz.

Class’lar Özgün Değildir

Aynı Class birden fazla element için kullanılabilir.
Aynı element üzerine birden fazla Class atanabilir.

Birden fazla nesne üzerinde geçerli olması istenilen bir stilin kodları class yardımıyla yazılmalıdır. Diyelim ki ayrı ayrı birkaç paragraf bulunan sayfamızda, paragrafların aynı stili paylaşmasını istiyoruz.

.yazi-stili
{
   color:red;
   text-align:left;
   font-size:50%;
}

<p class="yazi-stili">Metin 1</p>
<p class="yazi-stili">Metin 2</p>

Yukarıdaki kod <p> etiketleri içerisine yazılan metinlere, “yazi-stili” adını verdiğimiz Class’a önceden atamış olduğumuz özellikleri (yazı tipi, boyutu, rengi vs.) uygular. Böylece aynı özellikleri tek tek tüm paragraflara yazmak yerine, önceden oluşturmuş olduğumuz stil taslağımızın ismini kullanarak uygulayabiliriz.

Peki ya aynı stili paylaşmasını istediğimiz paragraflardan yalnızca birinde ufak bir değişiklik yapmak istesek? Burada, tek bir element üzerine birden fazla class atanabilme özelliğinden yararlanacağız.

.buyuk
{
   font-size:100%;
}

<p class="yazi-stili buyuk">Metin</p>

Diğerlerinden daha büyük olmasını istediğimiz bir paragrafa, “yazi-stili” Class’ına ek olarak “buyuk” adını verdiğimiz Class’ı ekleyeceğiz. Bunun için yukarıdaki gibi iki Class’ı boşlukla ayırmamız yeterlidir.

Class ve ID’yi kullanırken başlangıçta isimler kafa karıştırıcı olabiliyor. Ancak Class isimlerinin veya ID’nin kendi başına herhangi bir özellik atanmadan elementlere bir etkisi olmadığını unutmamak gerekir. CSS kodlarını taslak olarak düşünürsek isimleri de taslağın ismi olarak düşünebiliriz.

Barkodlar ve Seri Numaraları

Class ve ID arasındaki farkı barkodlar ve seri numaraları arasındaki farka benzetebiliriz. Mağazada bir ürünün barkodunu tarattığımızda sistem bize ürünün fiyatından rengine kadar bilgi verebilir. Bu bilgi, mağazada aynı üründen birden fazla bulunduğundan diğerleri ile de paylaşılır. Böylece o ürünü tanımlamak için tüm ürünlerde ortak bir barkod kullanılır.

Ürünün üzerinde ayrıca, tüm ürünlerde tamamen farklı olan dolayısıyla da ürünlerin birbirinden ayırt edilmelerini sağlayan bir seri numarası bulunur. Ancak seri numarası ürünün fiyat bilgisini içermez. Elbette ki istenirse içerebilir, ancak bu durum üründe herhangi bir fiyat değişikliği olduğunda tüm ürünlerin fiyatlarını değiştirmemizi zorlaştırır. Bunun yerine, barkod ile tüm ürünlerde tek seferde fiyat değişikliği yapabiliriz.

Barkod ve seri numaralarında olduğu gibi tek bir elemente hem Class hem de bir ID atamak mümkün. Hatta bazı durumlarda bu işimizi kolaylaştırır. Örneğin aşağıda bir WordPress yorumuna atanmış Class ve ID kodu bulunuyor.

<li id="comment-27299" class="item">

Atandığı Class sayesinde belirtilen yorum, sayfadaki tüm yorumlarla aynı stilde bulunur. WordPress tarafından dinamik olarak oluşturulmuş olan ID ile de kodun belirttiği yorumun bulunması kolaylaşır.

Kaynakça

Görsel Kaynakça: