Sınıf ve ID seçiciler
.class ve #id seçicilerinin farkını öğrenirsin.
Sınıf seçicisi
Bir sınıf seçicisi aynı etiket türünden farklı öğeleri ayırt etmemizi sağlar. Yazımı: nokta işareti, ardından sınıf adı. .featured seçicisi, class="featured" özniteliği taşıyan tüm öğeleri bulur — etiket ne olursa olsun.
Sınıf adları bir öğede birden fazla olabilir: class="featured highlight". Bu durumda her iki sınıf seçicisi de öğeyi yakalar. Sınıflar bu yüzden yeniden kullanılabilir stiller için idealdir.
Kimlik seçicisi
Bir kimlik seçicisi (#) sayfada yalnızca bir öğeye işaret etmek içindir. Yazımı: kare işareti, ardından kimlik adı. #header seçicisi id="header" özniteliğine sahip öğeyi bulur.
HTML belirtimine göre bir kimlik sayfada yalnızca bir kez geçer. Bu yüzden kimlik seçicileri tekil öğeler içindir; tekrarlanan stiller için sınıf kullanmalısın.
Öncelik sırası
Tarayıcı iki seçici aynı öğeyi aynı özellik için biçimlendirirse, hangisinin kazanacağını öncelik (specificity) belirler. Basit sıra: kimlik seçicisi sınıf seçicisinden, sınıf seçicisi tür seçicisinden güçlüdür.
Yani #main, .box'ı yener; .box da div'i yener. Aynı düzeydeki iki seçici çakışırsa, dosyada sonra yazılan kazanır.
Uygulama Sınıf ve kimlik seçicilerini yaz
İki ayrı stil bloğu ekle. Birincisi .button sınıf seçicisi; background: navy ve color: white özelliklerini taşısın. İkincisi #main kimlik seçicisi; padding: 1rem özelliğini taşısın.
Örnek çözümü göster
/* sınıf ve kimlik seçicilerini ekle */
.button {
background: navy;
color: white;
}
#main {
padding: 1rem;
}Kendini test et
-
Hangi öğe .menu sınıf seçicisiyle eşleşir?
.menu { padding: 0.5rem; }- <nav id="menu">
- <menu>
- <ul class="menu">
- <ul class="navigation">
Cevabı göster
<ul class="menu"> — Doğru. .menu sınıf seçicisi class="menu" taşıyan öğeleri bulur; <ul class="menu"> eşleşir.
-
Kimlik seçicisini yaz
____ { background: navy; color: white; }Cevabı göster
#header { background: navy; color: white; }