CSS Seçicileri Yazımı - Etiket Seçicileri
Markanız için 300X300 alan.
CSS seçicileri belgedeki etiketleri seçmeye yararlar ve birbirleri üzerinde baskınlık kurarlar. Etiketleri çok farklı biçimde seçebilirsiniz. Her yöntemin kendine göre ayrı bir önemi vardır.
div{color:red;} ile bütün div'ler, yani kutular, seçilir.
div - Seçici.
{ } Seçiciye ait özellikleri tutar.
color - Özellik
: Özellik ve değeri birbirinden ayırır.
red - Değer.
; Seçiciye ait özellikleri birbirinden ayırır.
Yukarıdaki örnek kod, sayfadaki tüm kutuların (<div>) içindeki yazıların kırmızı renkli olmasını sağlar.
Diğer CSS seçicilerinden bazıları:
html ve root belgeyi seçerler.
body gövdeyi seçer (kullanıcıya gösterilen bölüm). body{color:red;} ile tüm yazılar kırmızı yapılır.
div kutuları seçer.
p paragrafları.
span satır içi ögeleri seçer.
h1, h2, h3, h4, h5, h6 başlıkları seçer.
a bağlantıları seçer.
img görselleri seçer.
Tanıştırayım. Bunlar aynı zamanda HTML etiketlerinin adlarıdır! =)
CSS seçicileri birbirleriyle ilişkili olarak kullanılabilirler.
article > div seçicisi <article> etiketi içinde doğrudan ne kadar <div> etiketi varsa seçer.
p > a seçicisi yalnızca doğrudan <p> etiketi içindeki bağlantıları seçer.
article > div > p > a seçicisi <article> etiketi içindeki <div> etiketlerindeki paragrafların içinde olan bağlantıları seçer.
Ya da
article > div.uyar > p > a seçicisi <article> etiketi içindeki yalnızca uyar sınıflı bir <div> etiketi içindeki paragraf içinde olan bağlantıları seçer.
article > .hata > p > a seçicisi <article> etiketi içindeki yalnızca hata sınıflı HTML etiketlerindeki paragraf içinde olan bağlantıları seçer.
Birden fazla seçiciye aynı değeri atamak için seçicilerin aralarına virgül (,) koyun:
#buBirKimlikSeçicisi, .buBirSınıfSeçicisi, h1, h2.uyar, div#örnek > h3 {color:white;}CSS Seçicilerinde Sınıflar ve Kimlikler
Etiketler etiketlere sınıf ya da kimlik atanarak ya da öznitelikler üzerinden de seçilebilir.
Kimliklerin ve sınıfların aralarında fark vardır. Bir belgede yalnızca bir kimlik bulunmalıdır.
Sınıflar nokta (.) ile başlar.
.AlttanÇizgi{text-decoration:underline;}<span class="AlttanÇizgi">Alttan Çizgi</span>Kimlikler kare (#) ile başlar.
#TuruncuYazı{color:orange;}<span id="TuruncuYazı">Turuncu Yazı</span>Bir etiket yalnızca bir kimliğe iye olabilir.
<span id="Turuncu"></span>İki kimliğe iye olursa ikisi de görmezden gelinir.
<span id="Turuncu AlttanÇizgi"></span>Bir etikete aralarında boşluk bırakarak birden fazla sınıf atanabilir.
<span class="AlttanÇizgi KırmızıYazı"></span>İkisi birlikte:
<span class="AlttanÇizgi" id="TuruncuYazı">Alttan Çizgili Turuncu Yazı</span>Eğer bir etikete hem sınıf hem kimlik tanımlaması yapılırsa, ikisi de uygulanır.
Hem sınıf da hem de kimlikte aynı özellik farklı farklı değerlerle belirlenirse, kimlikteki değer geçerli olur, kimlik baskındır.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>İlk Sayfamı Yapıyorum</title>
<style type="text/css">
#Turuncu{color:orange;}
.Kırmızı{color:red;}
</style>
</head>
<body>
<p class="Kırmızı" id="Turuncu">Selam Dünyalı !</p>
</body>
</html>Bir etiket en fazla kaç sınıfa iye olabilir ?
Yanıt: Çok fazla!
Tarayıcılar bu konuda herhangi bir sınırlama koymuyor.
Eğer bir etikete 4'ten, 5'ten fazla sınıf uyguluyorsanız bir şeyleri yanlış yapıyorsunuz demektir.
- Sınıflar ve kimlikler sayı ile başlarsa
- Sınıflarda ve kimliklerde yalnızca sayı kullanılırsa (zaten sayı ile başlamış olurlar)
seçici görmezden gelinir.
İlişkili CSS Seçicileri
Bazı CSS seçicileri, etiketleri yalnızca aralarındaki ilişkilere göre seçebilmenize olanak sağlar.
E C- Herhangi bir
CögesiE'nin çocuğuysa ya da torunuysa ya da çocuğunun torunuysa ve benzeri... E > CE'nin çocuğu olan herhangi birCögesiC:first-child- Atanın ilk çocuğu olan herhangi bir
Cögesi C + KC'nin bir sonraki kardeşi olanKögesi (aynı atanın bir sonraki çocuğu).
Yukarıdaki ilişkili CSS seçicileri, birbirleriyle birleştirilerek kullanılabilir.
Ayrıca her ögeyi seçmek için CSS seçicisi olarak yıldız (*) imgesi kullanılabilir.
İlişkili CSS seçicileri daha karmaşıklaştırılarak daha baskın duruma getirilebilir.
Böylece bir çok sınıf ya da kimlik kullanmaktan kurtulabilirsiniz. CSS, işini yapacaktır.
Ancak hız söz konusu ise çok karmaşık ve de uzun olan biçimlerde bu yöntem yoğun olarak kullanılmamalı. Böylece daha iyi verimlilik sağlanır.
div p ya da .ilkSınıf .birDiğeri = E C = Yani:
<div class="ilkSınıf">
<p class="birDiğeri">
</p>
</div>Ya da
<div class="ilkSınıf">
<div class="arayaGir">
<p class="birDiğeri">
</p>
</div>
</div>div > p ya da .ilkSınıf > .birDiğeri = E > C = Yani:
<div class="ilkSınıf">
<p class="birDiğeri">
</p>
</div>div > p.Seçici ya da .ilkSınıf p.birDiğeri = E C.S = Yani:
<div class="ilkSınıf">
<p class="birDiğeri">
birDiğeri değerine iye olan paragraf, yani yalnızca bu paragraf seçildi.
</p>
<p>
Bu paragraf seçilmedi!
</p>
</div>CSS Yalancı Seçicileri
Yalancı-ögeler seçili ögelerin özel parçalarını biçimlendirmeye yarar, ilk satır gibi... Çift iki nokta üst üste (::) ile yazılırlar.
Yalancı-sınıflar seçili ögeleri bazı özel durumlara göre belirlemeye yarar; fare ile üzerinde durma (:hover) gibi... Tek iki nokta üst üste (:) ile yazılırlar.
seçici:yalancıSeçici{değer:özellik;}
:link:visited:active:hover:focus:first-child:nth-child:nth-last-child:nth-of-type:first-of-type:last-of-type:empty:target:checked:enabled:disabled::after::before::first-letter::first-line
Tam dizelge için CSS Seçicileri sayfasına gidin.
CSS Seçicilerinde Yazım Yanlışları
h1, h2, h3, h4, h5, h6, {font-size:17px;}yanlıştır.
Doğrusu:
h1, h2, h3, h4, h5, h6 {font-size:17px/;}Blokları kapatmayı unutmayın:
h1, {font-size:17px;yanlıştır.
Doğrusu:
h1 {font-size:18px;}