29.10.2015 ,
yorum yapılmadı ,
3.294 kez okundu.
Bir önceki paylaşımımda css3 seçiciler konusunun ilk bölümünü yayınlamıştım. Bu yazımda css3 seçiciler konusuna devam etmek istiyorum.
ID selectors (#)
Kimlik seçicileri HTML elemanlarının id özelliklerine atanan benzersiz isimler seçici adı olarak kullanılır. Sayfada kullandığınız tüm HTML elemanlarının id seçici adları benzersiz olmalıdır. Aynı isimle kullandığınızda bir sorun oluşmaz, hata almazsınız ama standartlara uygun olmayacaktır. Kimlik seçiciler benzersiz isimlerin başına kare işareti (#) yazılarak kullanılır.
Örnek kodumuz aşağıdaki gibi olacaktır:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS selectors</title>
<style type="text/css">
#stil
{
font-size:18px; color:#FF0004;
}
</style>
</head>
<body>
<div id="stil">Bu bir denemedir.</div>
</body>
</html>Class Selectors (.)
Sınıf seçiciler HTML elemanlarının class (sınıf) özelliğine atanan seçicilerdir. Tüm HTML elemanlarının kullanabileceği sınıf seçicileri oluşturmanız mümkündür. Sınıf seçicileri belirlenen kelimenin başına nokta (.) işareti yazılarak kullanılır.
Örnek kodumuz aşağıdaki gibi olacaktır:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS selectors</title>
<style type="text/css">
.kirmizi
{
color:#FF0004;
}
em.mavi
{
color:#0064FF
}
</style>
</head>
<body>
<div class="kirmizi">Bu bir denemedir.</div>
<p class="kirmizi">Bu bir denemedir.</p>
<h1 class="kirmizi">Bu bir denemedir.</h1>
<span class="mavi">Bu bir denemedir</span>
<em class="mavi">Bu bir denemedir</em>
</body>
</html>Yukarıdaki örnekte dikkat ederseniz sınıf seçici adını iki farklı şekilde kullandık. İlkinde .kirmizi ikinicisinde em.mavi diye kullandık. Burada .kirmizi diye isimlendirdiğimiz seçicimizi tüm HTML elemanları için kullanabiliyoruz. Fakat em.mavi diye isimlendirdiğimiz seçicimizi sadece em elemanları için kullanabiliyoruz. Örnekte span elemanına atadığımız sınıf seçicisi (mavi) her hangi bir etki yaratmayacaktır.
Descendant Selectors ( )
Soy seçiciler. Bu seçiciler soy ağacı mantığı ile çalışmaktadır. Bir HTML elemanının soyundan gelen eleman ya da eleman gruplarına uygulanır. Soy seçiciler aralarında boşluk bırakılarak yazılır.
Örnek kodumuz aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS selectors</title>
<style type="text/css">
.yazi .renk
{
color:#0064FF
}
</style>
</head>
<body>
<div class="yazi">
Bu bir deneme yazısıdır. <span class="renk">Kodları</span> kopyalayarak deneyebilirsiniz.
</div>
</body>
</html>Daha açıklayıcı anlatmak gerekirse bu kodumuzda şunu demiş olduk. Sınıf seçicisi .yazı olan elemanın içerisindeki sınıf seçicisi .renk olan eleman metnin rengini değiştir.
kaynak: w3 selectors
Yorum yapın..