CSS'te Özellik Seçicileri
Bu dersimizde CSS'te özellik seçicilerini göreceğiz. Bu, bir özelliğin başka bir özellik ile olan etkileşimine işaret eder.
[özellik] { }
Köşeli parantezler içine yazdığımız özellik değeri ile kendimize ait bir atıf belirleyebiliriz.
body {
font-family: Verdana, monospace, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: justify;
min-height: 800px;
}
[zinzin] {
font-weight: bold;
text-decoration: underline;
}
Şeklinde kodlarımız olduğunu varsayalım.
<div zinzin>
<p>Bu bir denemedir.</p>
</div>
HTML kodlarımız ise bu şekilde.
Görüldüğü gibi çıktımız bu şekilde olacaktır.
[zibidi="zinzin"] {
color: green;
}
[zibidi="zomzom"] {
color: maroon;
}
Atıfları bu şekilde değerleri ile birlikte de kullanabiliriz.
<div zibidi="zinzin">
<p>Bu bir denemedir.</p>
</div>
<div zibidi="zomzom">
<p>Bu bir denemedir.</p>
</div>
Bu şekilde HTML'e döküyoruz.
Çıktımız ise bu şekilde olacaktır.
Her ne kadar böyle bir yöntemimiz olsa da biz yine de class'ları kullanmayı tercih etmeliyiz.
Çocuk ve Torun Seçici | E F { }
Bu özellik seçicisini aslında birkaç kere kullandık. Bir özelliğin içindeki başka bir özelliği seçmek için kullanılır.
#deneme p {
color: skyblue;
}
Burada dedik ki deneme ID'sinin altındaki paragrafların rengini mavi yap.
<div id="deneme">
<p>Bu bir deneme yazısıdır.</p>
</div>
<div>
<p>Bu bir deneme yazısıdır.</p>
</div>
<div>
<p>Bu bir deneme yazısıdır.</p>
</div>
Bu şekilde de HTML kodları olduğunu varsayalım.
Sadece deneme ID'sine sahip paragrafların rengini mavi yaptığımız için diğer paragrafların rengi değişmedi.
Çocuk Seçici | E > F { }
Eğer sadece belirli bir elementi değiştirmek istiyorsak çocuk seçiciyi kullanabiliriz.
div>p>span {
color: maroon;
}
div elementinin içindeki p elementinde olan span etiketinin rengini bordo yapmak istedik.
<div>
<p>
<span>Bu bir deneme yazısıdır.</span>
</p>
</div>
<div>
<span>Bu bir deneme yazısıdır.</span>
</div>
<div>
<span>Bu bir deneme yazısıdır.</span>
</div>
HTML kodlarımız ise bu şekilde.
Görüldüğü gibi sadece p elementinin içindeki span etiketlerinin rengi değişti.
Doğrudan Kardeş Seçici | E + F { }
Bu özellik seçicisi iki bitişik elementin özelliğini değiştirmek için kullanılır.
p+span {
color: goldenrod;
}
p elementi ile bitişek olan tüm span etiketlerinin rengi altın rengi olacaktır.
<div>
<p>Bu bir deneme yazısıdır.</p>
<span>Bu bir deneme yazısıdır.</span><br/>
<span>Bu bir deneme yazısıdır.</span><br/>
<span>Bu bir deneme yazısıdır.</span><br/>
<span>Bu bir deneme yazısıdır.</span><br/>
<p>Bu bir deneme yazısıdır.</p>
</div>
HTML kodlarımız ise bu şekilde.
Görüldüğü gibi sadece p elementinden sonra gelen span etiketinin rengi değişti. En altta span etiketinden sonra p etiketi gelmişti; fakat onun rengi değişmedi. Bu ayrımı görmelisiniz.
Dolaylı Kardeş Seçici | E ~ F { }
Bir elementin kendinden sonra gelen elementi değiştirmek için kullanılır.
p~span {
color: goldenrod;
}
p elementinden sonra gelen tüm span etiketlerinin rengini altın rengi olarak belirledik.
<div>
<span>Bu bir deneme yazısıdır.</span><br/>
<span>Bu bir deneme yazısıdır.</span><br/>
<p>Bu bir deneme yazısıdır.</p>
<span>Bu bir deneme yazısıdır.</span><br/>
<span>Bu bir deneme yazısıdır.</span><br/>
<span>Bu bir deneme yazısıdır.</span><br/>
<span>Bu bir deneme yazısıdır.</span><br/>
<p>Bu bir deneme yazısıdır.</p>
</div>
HTML kodlarımız ise bu şekilde.
Görüldüğü gibi sadece p elementinden sonra gelen span etiketlerinin rengi değişti. Dikkat edersiniz ilk iki span etiketinin rengi değişmedi.
Gruplandırma
Bazen CSS kodları yazarken aynı değere sahip özellikler kullanabiliyoruz. Bunun işin tüm bu özelliklerin değerlerini tek bir seferde yazabiliyoruz. Bunun için virgül (,) işaretini kullanıyoruz.
#deneme1,
#deneme2,
#deneme3 {
color: goldenrod;
}
#deneme4,
#deneme5 {
color: royalblue;
}
Bu örneğimizde 1, 2 ve 3 numaralı deneme ID'lerinin rengini altın, 4 ve 5 numaralı deneme ID'lerinin rengini ise mavi olarak belirledik.
<div id="deneme1">
<span>Bu bir deneme yazısıdır.</span>
</div>
<div id="deneme2">
<span>Bu bir deneme yazısıdır.</span>
</div>
<div id="deneme3">
<span>Bu bir deneme yazısıdır.</span>
</div>
<div id="deneme4">
<span>Bu bir deneme yazısıdır.</span>
</div>
<div id="deneme5">
<span>Bu bir deneme yazısıdır.</span>
</div>
Bu şekilde de HTML kodlarına sahibiz.
Görüldüğü gibi ilk üç ID'nin rengi altın, 3üncü ve 4üncü ID'ye sahip div'lerin rengi ise mavi oldu.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde CSS'te transition konusuna değineceğiz.