CSS Çoklu Seçiciler Nedir? Nasıl Kullanılır?

Bu yazımızda CSS de çoklu ( multiple ) seçiciler nasıl kullanacağımızı anlatacağız.

CSS de bir den fazla seçici ye aynı kod aralığını kullanmamıza olanak veren yapı diyebiliriz. Örneğin hem <p> elementinin hemde <span> elementlerinin renklerini tek kod aralığı ile düzenleyebiliriz.

CSS çoklu ( multiple ) seçiciler kullanılırken önce seçmek istediklerimizi yazarız, her seçici arasına virgül (,) koyarız ve sonrasında kod aralığımızı yazarız.

Örnek 1:

<!DOCTYPE html>
<html>
<head>
<style>
div, p, span {/* burada div, p ve span etiketlerini seçtik */
	color:red;
}
</style>
</head>
<body>
<div>Örnek bir alan.</div>
<p>Örnek bir paragraf.</p>
<span>Örnek bir metin.</span>
<p>Örnek bir paragraf.</p>
<span>Örnek bir metin.</span>
</body>
</html>

Tarayıcıdaki Sonucu:

css çoklu ( multiple ) seçiciler örnek sonucu

Yukarıdaki örnekte gördüğümüz gibi tek satırda aralarına virgül koyarak div, p ve span etiketlerini seçtik ve renklerini değiştirdik.

Örnek 2:

<!DOCTYPE html>
<html>
<head>
<style>
div#denemeId, p, span.deneme-class {
	color:blue;
}
</style>
</head>
<body>
<div id="denemeId">Örnek bir alan.</div>
<p>Örnek bir paragraf.</p>
<span>Örnek bir metin.</span>
<div class="deneme-class">Örnek bir alan.</div>
<p class="deneme-class">Örnek bir paragraf.</p>
<span class="deneme-class">Örnek bir metin.</span>
</body>
</html>

Tarayıcıdaki Sonucu:

css çoklu ( multiple ) seçiciler örnek 2 sonucu

Burada ise id ve class global özelliği ile de örnek yaptık. ID si “denemeId” olan div, p etiketi ve class ı “deneme-class” olan span etiketlerini seçtik ve rengini mavi yaptık.

Diğer Seçiciler ile İlgili Yazılarımız

  1. Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
  2. 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.
  3. 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.
  4. 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.
  5. Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
  6. Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
  7. Genel Kardeş (Sibling) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
  8. Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
  9. Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
  10. 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.
  11. CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.

Başka bir yazımızda buluşmak dileğiyle…

Leave a Reply