Hazırlayan: MELİH AKBULUT
Bu öğe seçici, öğe adına göre HTML öğelerini seçer.
ÖRNEK: Burada, sayfadaki tüm <p> öğeleri kırmızı metin rengiyle ortaya hizalanacaktır:
p {
text-align: center;
color: red;
}
İD seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id niteliğini kullanır.
Bir öğenin kimliği, bir sayfa içinde benzersizdir, bu nedenle id seçici, benzersiz bir öğeyi seçmek için kullanılır!
Belirli bir kimliği olan bir öğeyi seçmek için, bir kare {#}karakteri ve ardından öğenin kimliğini yazılır.
ÖRNEK: AşağıdA CSS kuralı, id="elma" ile HTML öğesine uygulanacaktır:
#elma {
text-align: center;
color: red;
}
Sınıf seçici, belirli bir sınıf özelliğine sahip HTML öğelerini seçer.
Belirli bir sınıfa sahip öğeleri seçmek için, bir nokta (.) karakteri ve ardından sınıf adını yazın.
ÖRNEK: Bu örnekte, class="center" değerine sahip tüm HTML öğeleri kırmızı olacak ve ortaya hizalanacaktır:
.center {
text-align: center;
color: red;
}
Aynı zamanda bir sınıftan yalnızca belirli HTML öğelerinin etkilenmesi gerektiğini de belirtebilirsiniz.
ÖRNEK: Bu örnekte yalnızca class="center" olan <p> öğeleri kırmızı olacak ve ortaya hizalanacak:
p.center {
text-align: center;
color: red;
}
HTML öğeleri ayrıca birden fazla sınıfa başvurabilir.
ÖRNEK: Bu örnekte, <p> öğesinin stili class="center" ve class="large"'a göre olacaktır:
<p class="center large">This paragraph refers to two classes.</p>
Evrensel seçici (*), sayfadaki tüm HTML öğelerini seçer.
ÖRNEK: Aşağıdaki CSS kuralı, sayfadaki her HTML öğesini etkileyecektir:
* {
text-align: center;
color: blue;
}
Gruplandırma seçici, aynı stil tanımlarına sahip tüm HTML öğelerini seçer.
ÖRNEK: Aşağıdaki CSS kodunda (h1, h2 ve p öğeleri aynı stil tanımlarına sahiptir):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Kodu küçültmek için seçicileri gruplamak daha iyi olacaktır.
Seçicileri gruplandırmak için her seçiciyi virgülle ayırın.
ÖRNEK: Bu örnekte, seçicileri yukarıdaki koddan gruplandırdık. Seçicileri virgülle ayırarak bu kadar basite indirgeye biliyoruz.
h1, h2, p {
text-align: center;
color: red;
}
SELECTORS ÖRNEK ÖRNEK AÇIKLAMA
#İD #FİRSTNAME id="firstname" ile öğeyi seçer
.class .intro class="intro" ile tüm öğeleri seçer
element.class p.intro Yalnızca class="intro" içeren <p> öğelerini seçer
* * Bütüğün öğeleri seçer
element p Bütün <p> öğesini seçer
element,element div,p Tüm <div> öğelerini ve tüm <p> öğelerini seçer