CSS seçiciler kullanılmış stil vermek istediğiniz içeriği seçmek için . Seçiciler CSS kural kümesinin bir parçasıdır. CSS seçicileri, HTML öğelerini kimliğine, sınıfına, türüne, niteliğine vb. göre seçer.
CSS'de birkaç farklı seçici türü vardır.
- CSS Öğesi Seçici
- CSS Kimliği Seçici
- CSS Sınıf Seçici
- CSS Evrensel Seçici
- CSS Grup Seçici
1) CSS Öğesi Seçici
Öğe seçici, HTML öğesini ada göre seçer.
p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p> Şimdi Test Edin Çıktı:
Bu stil her paragrafa uygulanacaktır.
Ben de!
Ve ben!
2) CSS Kimliği Seçici
Kimlik seçici, belirli bir öğeyi seçmek için bir HTML öğesinin kimlik özelliğini seçer. Bir kimlik sayfa içinde her zaman benzersiz olduğundan tek, benzersiz bir öğe seçilecek şekilde seçilir.
Hash karakteri (#) ve ardından öğenin kimliği ile yazılır.
'para1' kimliğiyle bir örnek alalım.
#para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p> Şimdi Test Edin Çıktı:
Merhaba Javatpoint.com
Bu paragraf etkilenmeyecektir.
3) CSS Sınıf Seçici
Sınıf seçici, belirli bir sınıf özelliğine sahip HTML öğelerini seçer. Dönem karakteriyle birlikte kullanılır. (nokta sembolü) ve ardından sınıf adı.
Not: Sınıf adı sayıyla başlamamalıdır.
'Merkez' sınıfıyla bir örnek alalım.
.center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p> Şimdi Test Edin Çıktı:
Merhaba Javatpoint.com
Merhaba Javatpoint.com (Daha küçük yazı tipiyle)
Bu bir paragraf.