CSS Seçiciler
Bir CSS seçici, stil vermek istediğiniz HTML öğelerini seçer.
CSS Seçiciler
CSS seçicileri, stil vermek istediğiniz HTML öğelerini "bulmak" (veya seçmek) için kullanılır.
CSS seçicilerini beş kategoriye ayırabiliriz:
- Basit seçiciler (ad, kimlik, sınıfa göre öğeleri seçin)
- Birleştirici seçiciler (aralarındaki belirli bir ilişkiye göre öğeleri seçin)
- Sözde sınıf seçiciler (belirli bir duruma göre öğeleri seçin)
- Sözde öğe seçiciler (bir öğenin bir bölümünü seçin ve stil verin)
- Nitelik seçiciler (bir nitelik veya nitelik değerine göre öğeleri seçin)
Bu sayfa en temel CSS seçicilerini açıklayacaktır.
CSS öğesi Seçici
Öğe seçici, öğe adına göre HTML öğelerini seçer.
Örnek
Burada, sayfadaki tüm <p> öğeleri, kırmızı bir metin rengiyle ortaya hizalanacaktır:
p
{
text-align: center;
color: red;
}
CSS kimliği Seçici
Kimlik seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id niteliğini kullanır.
Bir öğenin kimliği, bir sayfada benzersizdir, bu nedenle kimlik seçici, benzersiz bir öğeyi seçmek için kullanılır!
Belirli bir kimliğe sahip bir öğe seçmek için, bir kare (#) karakteri ve ardından öğenin kimliğini yazın.
Örnek
Aşağıdaki CSS kuralı, id="para1" ile HTML öğesine uygulanacaktır:
#para1
{
text-align: center;
color: red;
}
Not: Kimlik adı bir sayı ile başlayamaz!
CSS sınıfı Seçici
Sınıf seçici, belirli bir sınıf niteliğine sahip HTML öğelerini seçer.
Belirli bir sınıfa sahip öğeleri seçmek için, bir nokta (.) karakteri ve ardından sınıf adını yazın.
Örnek
Bu örnekte class="center" içeren tüm HTML öğeleri kırmızı olacak ve ortaya hizalanacaktır:
.center {
text-align: center;
color: red;
}
Bir sınıftan yalnızca belirli HTML öğelerinin etkilenmesini de belirtebilirsiniz.
Örnek
Bu örnekte yalnızca class="center" içeren <p> öğeleri kırmızı olacak ve ortaya hizalanacaktır:
p.center {
text-align: center;
color: red;
}
HTML öğeleri ayrıca birden fazla sınıfa atıfta bulunabilir.
Örnek
Bu örnekte <p> öğesinin stili class="center" ve class="large"'a göre olacak:
<p class="center large">This paragraph refers to two classes.</p>
Not: Bir sınıf adı bir sayı ile başlayamaz!
CSS Evrensel Seçici
Evrensel seçici (*) sayfadaki tüm HTML öğelerini seçer.
Örnek
Aşağıdaki CSS kuralı, sayfadaki her HTML öğesini etkiler:
*
{
text-align: center;
color: blue;
}
CSS Gruplama Seçici
Gruplama seçici, aynı stil tanımlarına sahip tüm HTML öğelerini seçer.
Aşağıdaki CSS koduna bakın (h1, h2 ve p öğeleri aynı stil tanımlarına sahiptir):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Kodu en aza indirmek için seçicileri gruplamak daha iyi olacaktır.
Seçicileri gruplamak için her seçiciyi virgülle ayırın.
Örnek
Bu örnekte, seçicileri yukarıdaki koddan grupladık:
h1, h2, p
{
text-align: center;
color: red;
}
Tüm CSS Basit Seçiciler
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |