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:
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:
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
- 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.
- 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.
Başka bir yazımızda buluşmak dileğiyle…