2 0
Read Time:1 Minute, 44 Second

Hayatta çoğu kez seçici oluyoruz mesela yemek yerken tuzlu tuzsuz kavgası yaparız nasıl mı ?

Hasan : Yemekte tuz mu var ya ?
Mert : Yaaa Allah aşkına kanka tuzsuz yemek mi olur tabi ki de var.
Aleyna : Yemek benim istediğim gibi TUZSUZ OLACAK O KADAR!
Kürşad : Bence tuzlu olsun bizim olsun etli ekmek yok mu kardeşim☺

Yukarıda hasan, mert, aleyna ve kürşad kardeşimizin tartışmasını görüyorsunuz bu bir seçici eylemidir. Tuzlu seçiyor tuzsuz seçiyor bunu niye örnek verdim diye soracak olursanız CSS ile kodlama yaparken de seçici var mesela Hasan # diye id seçici ile tanımlansın Mert . class seçici ile tanımlansın Aleyna ise kendi başına etiket seçici ile tanımlansın Kürşad ise * seçici olacak şekilde yine örnek verelim;

#Hasan { yemek:tuzsuz;}
.Mert {yemek:tuzlu;}
Aleyna {yemek:tuzsuz !important;}
*Kürşad {yemek:tuzlu;}

Yukarıda örnekte olduğu gibi etiket seçici olan Aleyna sözünü dinletiyor hasan ve mert ne söylese farksız çünkü aleyna bir etiket seçici ayrıca css kodunda important kullanmış kesin olacak ☺.

Aslında örnek ile vermek istememin sebebi akılda kalıcı olması idi teorik bilgiye geçecek olursak giriş kısmında size 4 temel seçiciden bahsedeceğim.

SeçiciÖrnekAçıklama
.class.mertClass = ” mert ” olan tüm elementleri seçer.
#id#hasanid=”hasan” id elementini seçer.
**Tüm öğeleri seçer.
elementpTüm “p” elementlerini seçer.
element,elementdiv, pTüm “div” elementlerini ve tüm “P” elementlerini seçer.
element elementdiv p“div” elementi içindeki tüm “p” elementlerini seçer.
Bu tabloda 4 temel seçiciden bahsetmişiz

Şimdi kodlar ile örnek verelim gerçek hayat bitti yukarıda ☻.

Class Seçici : .mert (SINIF SEÇİCİ) 
Class niteliği mert’e eşit olan nesneleri seçmek için kullanılır.
.mert{
color:blue;
}
ID Seçici : #hasan (TEKİL SEÇİCİ)
Id niteliği hasan’a eşit olan nesneleri seçmek için kullanılır.
#hasan{
color:red;
}
Etiket Seçici : p (Basit, Etiket Seçici)
p etiketine sahip olan nesnelerin tümünü seçer.
p{
color:blue;
}
* Evrensel Seçici : 
* ile tüm class, id, etiket seçicilerine hükmeder diyebiliriz.
* {
font-family:"Verdana";// Tüm sitede yazı fontu değişti. 
}

Sizi çok sıkmadan iki üç örnek ile anlatmaya çalıştım seçicilerin GİRİŞ kısmını, daha bir çok seçici ve kullanım şekli ilerleyen süreçte daha detaylı bir şekilde ve diğer örneklerimiz ile karşınıza gelecektir.
Beni okuduğunuz için teşekkür ederim.

Sosyal Medya’da paylaşırsanız sevinirim ☺.

Yazar Hakkında

Kürşad Aydın

Genç bilgi deneyimi olan Front-End Seven bir kardeşiniz.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir