Sınıf seçicisi
Sınıf seçicisi
Sınıf seçicisi, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 1 dersten oluşur.
Sınıf Seçicileri Neden Kullanılır
Merhaba,
CSS'teki en kritik konulardan biri olan sınıf seçicilerine geldik.
Sınıf seçicisini biliyoruz; çünkü şimdiye kadar sınıf seçicisini sıkça kullandık.
Bu derste hem bilgilerimizi pekiştirelim hem de diğer seçicilere göre avantajlarını öğrenelim.
Sınıf Seçicisi Sözdizimi
Öyleyse başlayalım.
Bir sınıf türü seçicisi tanımlamak için nokta (.) seçicisini kullanırız. Aşağıda my-class adlı bir sınıf seçicisine font-size stiline 10px değeri atanmıştır.
.my-class {
font-size: 10px;
}
Bir sınıf seçicisi için birden fazla stil de tanımlayabiliriz.
.my-class {
font-size: 10px;
}
Çoklu Seçici
Aynı öğeye birden fazla sınıf atayabiliriz.
Aşağıdaki örnekte el1 ve el2 adlı iki sınıf seçicisi tanımlanmıştır.
İki veya daha fazla sınıf, aralarında boşluk bırakılarak p etiketiyle oluşturulan öğenin class niteliğine eklenebilir.
Önizleme bölümünde iki sınıfın stillerinin aynı anda öğeye yansıtıldığını görebilirsiniz.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Etiket ve ID seçicisi yerine neden sınıf seçicisini tercih etmeliyiz?
Etiket ve ID seçicisi yerine neden sınıf seçicisini tercih etmeliyiz?
Etiket seçicisini kullandığımızda, bu etiketle oluşturulan tüm öğeleri etkilediği için istenmeyen sonuçlara yol açabilir. Bu nedenle bu etiketleri genellikle tüm öğelerin sahip olması gereken ortak bir özellik olduğunda kullanırız.
Örneğin, bir öğenin yazı tipi ailesinin 'Lato' olmasını istiyorsak aşağıdaki gibi bir tanımlama yaparız.
a{
font-family: Lato,sans-serif
}Etiket ve ID seçicisi yerine neden sınıf seçicisini tercih etmeliyiz? 2
ID seçicisiyle öğeye özel bir tanımlama yapabiliriz.
Ancak tüm stil tanımlamalarımız yalnızca bir öğe için geçerli olduğundan, aynı özellikleri göstermek istediğimiz başka bir öğe için kodları yeniden yazmamız gerekirdi.
Çünkü bir HTML belgesinde aynı ID değerine sahip yalnızca bir öğe bulunabilir.
CSS Özgüllüğü
Şimdi CSS özgüllüğü kavramını öğrenelim.
Konuyu daha iyi anlamak için yeniden bir problem oluşturalım ve bu problemi çözerken bu kavramı öğrenelim.
CSS Özgüllüğü 2
Aşağıdaki örnekte
p etiketi için bir stil tanımlaması yapılmıştır.
.first adlı bir sınıf seçicisiyle stil tanımlaması yapılmıştır.
Her iki seçici de HTML belgemizde aynı öğeyi seçmiştir.
Her iki seçicide de aynı renk özelliği için farklı stiller tanımlanmıştır. Bu durumda bir çakışma oluşur.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
CSS Özgüllüğü 3
Örneğe baktığımızda, önceki bilgilerimize dayanarak rengin kırmızı olacağını düşünebiliriz.
Çünkü basamaklı yapı kavramı, kod sıralamasında son sırada yer alan kodun geçerli olacağını söyler.
Ancak küçük bir ayrıntı vardır. Özgüllükleri aynıysa, en son gelen kod geçerli olur.
Bu, özgüllük seçicisinin ilgili öğe veya öğeler üzerindeki önemini gösteren bir değerlendirmedir.
Kod içindeki sırasından bağımsız olarak, özgüllük derecesi yüksek olan seçici tarayıcı tarafından değerlendirilir.
Uyarı
Sınıf seçicisi, öğe seçicisinden daha özgül bir tanımlamadır. Bu nedenle özgüllük derecesi daha yüksektir.
Seçici Özgüllüğü
Hangi seçicinin daha özgül olduğunu bulmak aslında çok basittir.
Bir öğeye atanmış yalnızca 1 ID bulunduğu ve web sayfasında da bundan yalnızca 1 tane olduğu için, bunun en yüksek önceliğe sahip seçici olmasını bekleriz.
Sınıf seçicileri ise etiketten daha özgül bir grubu seçtikleri için etiket seçicilerinden daha özgül olarak değerlendirilebilir.
Aşağıdaki örnekte aynı öğeyi 3 farklı seçiciyle seçerek ID seçicisinin kazandığını göreceğiz.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Özgüllük Hesaplama Aracı
Çevrim içi özgüllük hesaplayıcısına bu bağlantıdan erişebilirsiniz.
Özgüllüğün Önemli Olduğu Durumlar
Öyleyse bu hesaplamaları her zaman yapmak zorunda mıyım?
Elbette hayır. Kodlarımızı standartlara uygun yazdığımızda çakışmalar oluşmaz.
Yani sürekli matematiksel hesaplamalar yapmak zorunda değilsiniz; ancak bir sorun olduğunda, sorunu çözmek için bu bilgilere ihtiyaç duyabilirsiniz.
Tebrikler
Tebrikler. 🥳🥳🥳
Sınıf Seçicisi ve CSS Özgüllüğü dersini tamamladınız.
Bir sonraki bölümde Seçici Türlerini öğreneceğiz.
Devam etmek için bir sonraki bölüme tıklayabilirsiniz.
Sıkça Sorulan Sorular
“Sınıf seçicisi” dersi ücretsiz mi?
Evet — “Sınıf seçicisi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 1 dersten oluşur.
“Sınıf seçicisi” dersinde ne öğreneceğim?
Sınıf seçicisi HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“Sınıf seçicisi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.