2. 2 CSS’de Seçiciler
CSS’de Seçiciler
CSS’yi etkili bir şekilde kullanabilmek için Seçiciler
konusuna hakim olmak oldukça önemlidir.
Bu sunuda CSS kurallarını oluştururken kullandığımız
seçiciler çok uç örneklere ve aşırı detaya
girmeden anlatılacaktır.
Daha detaylı bilgiler için referans kaynaklara
bakılabilir.
ozguryaman.com
3. 3 CSS’de Seçiciler
CSS Kurallarının Yapısı
Seçiciler konusuna girmeden önce CSS kurallarının
ne olduğunu ve nasıl yazıldığını bilmekte fayda
var.
CSS dosyaları CSS kurallarından oluşur ve CSS
kuralları aşağıdaki yapıdadırlar:
p{
color:blue;
font-size:14px;
}
ozguryaman.com
4. 4 CSS’de Seçiciler
CSS Kurallarının Yapısı
Bu yapıya göre önce web sayfasında hangi
elemanları eklemek istiyorsak onu, yani seçiciyi
yazarız.
Ardından süslü parantezler arasında değiştirmek
istediğimiz özelliği ve iki nokta üst üste koyarak o
özelliğin alacağı değeri yazarız.
Son olarak noktalı virgül ile işlemi tamamlarız.
Bu şekilde istediğimiz kadar özellik ve kural
ekleyebiliriz.
ozguryaman.com
5. 5 CSS’de Seçiciler
CSS Kurallarının Yapısı
Bu şekilde eklediğimiz özellikler seçicinin sayfada
seçmiş olduğu elemanları etkiler.
Seçiciler sayesinde aşağıdaki gibi seçimler
yapabiliriz:
• Sayfadaki tüm linkler
• header alanında bulunan h1 başlıkları
• Link yapılmış resimler, gibi.
Şimdi seçicileri türlerine göre inceleyelim.
ozguryaman.com
6. 6 CSS’de Seçiciler
Eleman Seçicileri
Bu gruptaki seçiciler ile sayfada bulunan aynı
elemanların tümü seçilir.
Örneğin aşağıdaki seçici sayfadaki tüm linkleri
seçecektir.
a{
/* CSS Özellikleri */
}
ozguryaman.com
7. 7 CSS’de Seçiciler
Eleman Seçicileri
Aynı şekilde sayfada bulunan bütün paragrafların
iki yana yaslı olmasını istiyorsak, aşağıdaki kuralı
oluştururuz:
p{
text-align:justify;
}
ozguryaman.com
8. 8 CSS’de Seçiciler
İçiçe Seçiciler
Bu seçiciler sayesinde belli elemanların arasında
kalan elemanlar seçilebilmektedir.
Örneğin sayfada bulunan tüm linkler yerine, id’si
header olan div’in içindeki linkleri seçmek istersek,
şu kodu yazarız:
#header a {
// CSS Özellikleri
}
ozguryaman.com
9. 9 CSS’de Seçiciler
İçiçe Seçiciler – Örnek 1
Diyelim ki web sayfamızın yapısı şu şekilde olsun:
.
<div id="footer">
<a href="#">Anasayfaya Dön</a>
<p>Bize ulaşmak için
<a href="#">tıklayın</a>
</p>
</div>
. ozguryaman.com
10. 10 CSS’de Seçiciler
İçiçe Seçiciler – Örnek 1
CSS kuralımız ise şu şekilde olsun:
#footer a {
color:red;
}
Buna göre footer alanındaki iki link de id’si footer
olan elemanın arasında kaldığı için kırmızı olacaktır.
ozguryaman.com
11. 11 CSS’de Seçiciler
İçiçe Seçiciler – Örnek 2
Şimdi aşağıdaki kurala bakalım.
#footer p a {
color:red;
}
Buna göre footer alanındaki paragrafların arasında
kalan linkler seçilecek, dolayısıyla "tıklayın" linki kırmızı
olacak, birinci link seçilmediği için değişmeyecektir.
ozguryaman.com
12. 12 CSS’de Seçiciler
* Seçicisi
Web sayfasında bulunan elemanların tamamını
seçmek amacıyla kullanılır.
Genellikle web tarayıcılarının otomatik olarak
eklediği boşlukları (margin ve padding) sıfırlamak
için kullanılır.
*{
margin: 0;
padding: 0;
}
ozguryaman.com
13. 13 CSS’de Seçiciler
ID Seçicisi
HTML etiketlerinden ID verdiklerimizi bu seçiciyle
seçebiliriz.
Örneğin HTML kodumuz aşağıdaki gibi olsun:
.
<div id="header" >
<h1>Site Başlığı</h1>
</div>
.
ozguryaman.com
14. 14 CSS’de Seçiciler
ID Seçicisi
Bu koddaki ID'si header olan divin arkaplan
rengini kırmızı yapmak istersek, yazmamız gereken
CSS kuralı şöyle olmalıdır:
#header {
background:#F00;
}
ozguryaman.com
15. 15 CSS’de Seçiciler
ID Seçicisi
Aynı şekilde bu header'ın içinde bulunan
elemanları da şu şekilde seçebiliriz:
h1 {
color:#F00;
}
#header h1 {
color:#00F;
}
ozguryaman.com
16. 16 CSS’de Seçiciler
ID Seçicisi
Buna göre sayfadaki bütün h1 başlıkları kırmızı,
sadece header alanında bulunan h1'ler ise mavi
renkte olacaktır.
ozguryaman.com
17. 17 CSS’de Seçiciler
Class Seçicisi
Class seçicisi ID seçicisine benzer. ID seçicisi ile ID
verdiğimiz HTML elemanlarını seçerken, Class
Seçicisi ile class parametresi verdiğimiz HTML
elemanlarını seçebiliriz. Örneğin;
<h1 class="anabaslik">Sayfa Anabaşlığı</h1>
.
.
<h1>Diğer h1 Başlığı</h1>
ozguryaman.com
18. 18 CSS’de Seçiciler
Class Seçicisi
Buradaki HTML kodu için aşağıdaki CSS kuralını
yazalım:
h1 {
color:#F00;
}
.anabaslik {
color:#00F;
}
ozguryaman.com
19. 19 CSS’de Seçiciler
Class Seçicisi
Buna göre normal h1 başlıklarımız kırmız olurken,
class parametresine anabaslik verdiklerimiz mavi
renkte olacaktır.
Class'ı anabaslik olan elemanları .anabaslik
şeklinde seçebileceğimiz gibi, h1.anabaslik
şeklinde de seçebiliriz. Aradaki fark şudur:
Birincide class'ı anabaslik olan tüm HTML
elemanları, ikincide ise class'ı anabaslik olan
sadece h1'ler seçilir.
ozguryaman.com
20. 20 CSS’de Seçiciler
ID ve Class Seçicisi - Farklar
Bu iki seçici arasında bazı farklar vardır.
İlk olarak HTML tarafında aynı ID sadece tek bir
elemana verilebilir. Aynı class ise birden fazla
elemana verilebilir.
CSS tarafında class'ı seçerken nokta, ID'yi
seçerken sayı işareti kullanırız. (. ve #)
ozguryaman.com
