CSS Seçiciler ( Selector ) Nedir? Çeşitleri Nelerdir?

Bu yazımızda CSS seçiciler ( selector ) nedir ve Çeşitlerini anlatacağız.

Not:Element, eleman, etiket, nesne dediğimiz tabirlerin hepsi html etiketleridir. (örnek: <h1>, <p>, <a>, <img>… vb… gibi)

Css selector ( seçici ), HTML sayfasında bulunan herhangi bir elemanı (elementi) veya birden fazla elemanı seçerek özelliklerini değiştirmemize olanak verir. Örneğin bir başlığı seçip büyüklüğü ve rengini değiştirmek gibi.

Örnek verelim. kod kısmı:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style> 
h1{ /* css de h1 elementini seçip rengi degiştirdik */
color:red;
}
</style>
</head>
<body>
<h1> Örnek Başlık</h1>
<p>Örnek bir paragraf.</p>
</body>
</html>

Tarayıca Görüntüsü:

css seçiciler ( selector ) başlık sonucu

Yukarıdaki örnekte gördüğümüz gibi <h1> etiketini seçip rengini değiştirdik. <h1>elementini element olarak seçmiş olduk. Farklı seçme yöntemleri vardır. Bunları değinelim…

CSS Seçiciler (selector )’in Çeşitleri

Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
Element Seçici (Element), seçtiğimiz Html Elementini seçer. Yani seçmek istediğimiz elementi yazarız ve seçmiş oluruz.Örneğin <h1> elementini seçmek için “h1” yazmak gibi.
ID Seçici (#ID), Html elementine yazdığımız ID ile seçeriz. Elementlerin “id” attribute değerine bir isim veririz ve o isimi CSS de kullanırız.
Class Seçici (.class), Html elementine yazdığımız class ile seçeriz. Elementlerin “class” attribute değerine bir isim veririz ve o isimi CSS de kullanırız. Birden fazla elemente aynı class ı verebiliriz.
Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
Genel Kardeş ( Sibling ) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
Çoklu ( Multiple ) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
CSS Sözde Sınıf (Pseudo Class) Seçiciler, sınıf olmayıp sınıf gibi davranan ve seçim yapmamızı sağlayan yapılardır.
CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.

Bu yazımızın çok uzun olmaması için, CSS Seçiciler i tek tek ayrıntılı olarak ilerleyen derslerimizde anlatacağız. Üzerine tıklayarak ayrıntılı anlatımlarına gidebilirsiniz.

CSS seçicilerin de öncelik sırası aşağıdaki şekildedir;

Satır içi (inline) CSS kodları
“id” Seçicisi ile CSS kodları
“class” Seçicisi ile CSS kodları
“etiket” seçicisi ile CSS kodları

Burada öncelikten kastımız uygulanan seçicilerden hangisinin biçimlendirme yapacağıdır. Aşağıdaki örnekte görüldüğü gibi bir etikete farklı seçici ile seçip biçimlendirme yaptığımızda öncelik sırasına göre işlem yaptığı anlaşılmaktadır.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
body{background-color: darkgray;}
p#denemeID1, p#denemeID2 {
    color: blue;
}
p.deneme-class{
    color:aqua ;
}
p{
    color: yellow;
}
</style>
</head>
<body>
    <p style="color:red;" id="denemeID1" class="deneme-class">SU</p>
    <p id="denemeID2" class="deneme-class" >YEMEK</p>
    <p class="deneme-class">ÇAY</p>
    <p>TATLI</p>
</body>
</html>