CSS id Seçicisi

Id seçicisi

Id seçicisi belirli bir id ile işaretlenmiş HTML elementlerine özel stiller belirlemek için kullanılır.

Id seçicisi "#" ile tanımlanır.

Aşağıdaki iki id seçicisi, birincisi elementin rengini kırmızı olarak tanımlar, ikincisi ise yeşil olarak tanımlar:

#red {color:red;}
#green {color:green;}

Aşağıdaki HTML kodunda, id özelliği red olan p elementi kırmızı olarak görüntülenir, id özelliği green olan p elementi ise yeşil olarak görüntülenir.

<p id="red"> Bu paragraf kırmızı.
<p id="green"> Bu paragraf yeşil.

Dikkat:Id özelliği her HTML belgesinde bir kez ortaya çıkabilir. Neden bilmiyorsanız, bakınız XHTML: web sitesi yeniden yapılandırma.

Id seçicisi ve türetilmiş seçiciler

Günümüz düzenlerinde, id seçicisi türetilmiş seçiciler oluşturmak için sıkça kullanılır.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Yukarıdaki stiller sadece id'si sidebar olan element içindeki paragraflara uygulanır. Bu element büyük olasılıkla div veya tablo hücresi olabilir, ancak bir tablo veya diğer blok elementi de olabilir. Hatta bir içsel element olabilir, örneğin <em></em> veya <span></span> gibi, ancak bu kullanım yasaktır, çünkü içsel element <span> içinde <p> içe yerleştirilemez (sebep unutursanız, bakınız XHTML: web sitesi yeniden yapılandırma)

Bir seçici, çok çeşitli kullanımlar

Sidebar olarak işaretlenmiş olan elementler sadece belgede bir kez ortaya çıkabilir, bu id seçicisi türetilmiş seçici olarak çok kez kullanılabilir:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Burada, sayfadaki diğer p elementlerinden açıkça farklı olan sidebar içindeki p elementleri özel bir işleme tabi tutulmuştur, aynı zamanda, sayfadaki diğer tüm h2 elementlerinden açıkça farklı olan sidebar içindeki h2 elementleri de farklı özel bir işleme tabi tutulmuştur.

Ayrı Seçici

ID seçicisi, türetici seçici oluşturmak için kullanılmasa bile bağımsız olarak çalışabilir:

#sidebar {
	border: 1px noktalı #000;
	padding: 10px;
	}

Bu kurala göre, sidebar id'li element bir piksel genişliğinde siyah noktalı kenar çizgisi sahip olacak ve etrafında 10 piksel genişliğinde iç boşluk (padding, iç boşluk) olacaktır. Eski Windows/IE tarayıcıları bu kuralı göz ardı edebilir, bu seçicinin ait olduğu elementi özel olarak tanımlamazsanız:

div#sidebar {
	border: 1px noktalı #000;
	padding: 10px;
	}

İlgili İçerik

ID seçicisi hakkında daha derinlemesine bilgi edinmek istiyorsanız, CodeW3C.com'nun ileri düzey eğitim sayfalarını okuyun:CSS ID Seçicisi Ayrıntısı.