Css Öncelik Sıralaması — CSS Selectors
Bu yazıda CSS’te hangi yapıların (Id, Class, Inline Css) daha fazla önceliğe sahip olduğundan ve biraz da ne işe yaradıklarından bahsedeceğim.
Öncelikle şunu söylemek isterim ki önem sıralaması şu şekildedir;
Inline Css, Internal Css, Id, Class
Buradaki Id ve Class’ı external yani harici bir style dosyasından çağırdığınızı düşünerek söylüyorum. Dahası style.css dosyasından çağırdığınız bir style dosyası olarak da düşünebilirsiniz. Bu konuyu ilerleyen aşamalarda daha da iyi kavrayacağınızı düşünüyorum.
Bana sorarsanız, bunları ezberlemektense, mantığı anlamaya çalışmak ya da gerektiğinde deneyerek keşfetmek daha kıymetlidir. Benim fikrim, bu tarz konuların ilk önce ezberlenmesinden ziyade, Google’da nasıl aratılarak sonuca ulaşılabileceğini bilmeniz sizi daha fazla geliştirecektir.
Kısa bir soru: <p class=”text-success text-danger”>Merhaba</p> kodunun çıktısında sizce hangi renk ile karşılaşırsınız? Cevap yazının devamında, şimdiden düşünmeye başlayabilirsiniz :)
Yani satır içi yazılan CSS kodu HTML sayfa içerisinde <style></style> tagleri arasında yazılan CSS kodlarından daha önceliklidir. Ayrıca, Internal CSS kodları da Id ve Class’tan daha fazla önceliğe sahiptir. Bunu şöyle de düşünebilirsiniz; HTML içerisindeki kodlar, dışarıdan çağırdığınız style dosyasını override etti yani aslında ezdi.
3. sırada ise Id (ör: #blue) yer alıyor. Nedenini ise şu şekilde aklınızda tutabilirsiniz, Id’ler HTML içerisinde bir kez kullanılması gerekirken, classları birden çok kere kullanabilirsiniz.
4. sırada da haliyle class’lar yer alıyor.
Haydi gelin biraz da kodlara göz atalım ve işin içine biraz daha girelim.
Kodları tek tek inceleyerek başlayalım…
<h1 style=”color: red;” class=”blue”>Başlığımız</h1>
Burada hem Inline CSS hem de harici dosyadan gelen CSS bulunuyor. Inline CSS, harici dosyadan class’ımızı dövüyor ve ilk başlığımızın rengi kırmızı oluyor.
<h2 id=”blue” class=”yellow”>2. Başlığımız</h2>
Buradaki Id ve Class harici dosyadan geliyor. Ne demiştik, Id’ler Class’ları döver! O yüzden de Id içerisinde yer alan styling, Class’tan gelen yellow’ı dövüyor ve rengimiz Blue yani Mavi oluyor.
Peki classımız Internal CSS yani sayfa içerisinde <style> tagleri içerisinde yer alsa, Id’imiz de harici style dosyasından gelse ne olurdu? Kodumuz şu:
<h5 class=”internalClass” id=”ExternalId”>5. Başlığımız</h5>
Düşünüyoruz…
Evet, düşünmeye devam ediyoruz…
Bulduk mu?
Düşünmeye devam…
Evet, şimdi cevabı verelim.
Cevap: ExternalId
Sebep ise, CSS özelliği harici dosyadan da gelse; Id, Class’ı eziyor. Internal ve External kıyaslamasını aynı seviyedekiler için yapmak gerektiğini de anlamış oluyoruz. Yani Internal CSS ( .renk {color: black;} ) ve External CSS (.renk {color: red;} ) içerisinde aynı isimle bir class oluşturursak, Internal Class’taki renk class’ının styling’i kullanılacaktır. Örneğin bu vakada .renk class’ının sonucunda yazımızın rengi siyah (black) olacaktır.
Üstteki örnekle alakalı küçük bir tüyoya ne dersiniz?
Internal Css’te black yerine bilinçli olarak bl2ack yani olmayan bir renk yazsanız ne olur? Denemek ister misiniz? :) Bence kendiniz denemelisiniz ve sonucu görmelisiniz :)
Mantık olarak şöyle düşünebilirsiniz; eğer ki Internal Css’te geçerli bir CSS tanımlaması yoksa, gider External CSS’e bakarım. Internal CSS’te işime yarayan bir şey olmadığı için, haliyle External CSS’teki tanımlamayı önemser ve onun kodunu çalıştırırım.
Haydi, kodlamarıza göz atmaya devam edelim.
<h3 class=”orange red”>3. Başlığımız</h3>
Sizce orange classının mı yoksa red classının mı sözü geçer? “Erken kalkan yol alır”, “İlk gelen güzel yeri kapar” gibi sözleri aklımızda tutalım ve ilk classın sözünün geçtiğini bilelim. Eğer ki birçok class içerisinde aynı işi gören tanımlamalar varsa (color: #renkKodu) ve bir class diğerlerinden gerçekten de çok daha önemliyse, color: #ff0000 !important; ile bu değerin diğerlerinden daha önemli olduğunu söyleyebiliriz.
<h4 class=”dorduncu”>4. Başlığımız</h4>
Hem Internal Class’ta (.dorduncu {color: black;}) hem de External Class’ta (.dorduncu {color: purple;}) .dorduncu isminde bir classımız var. Ekranda hangi rengi görürüz? Aslında az önce bahsetmiştik bundan, bence artık sonucu biliyor olmalısınız, değil mi?
<p class=”text-success text-danger”>Merhaba</p>
İlk başta sorduğum sorunun cevabını da biliyorsunuz, değil mi? Evet, işte genel olarak CSS kodlarında öncelikler bu şekilde oluyor. Eğer, aklınıza takılan bir kısım olursa, lütfen sormaktan çekinmeyin.
(Kendime de not almak için)
Bir başka yazıdaysa CSS Selectorlara daha kapsamlı bir şekilde değinmeyi planlıyorum. İpucu olarak;
- Element > Element, Element + Element, Element ~ Element, Input[type=text], p:last-child, a:nth-child(3n+2), span:nth-child(odd) gibi özellikler bizleri bekler…
O gün gelene kadar, https://www.w3schools.com/cssref/css_selectors.asp adresinden muhteşem bir kaynağa ulaşabilirsiniz. Muhtemelen daha önce hiç görmediğiniz birçok özellikle karşılaşacaksınız, eminim :)
