Grup Seçicileri

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 14 / 76.

grup seçici, birden çok HTML öğesini seçmek ve hepsine aynı stilleri uygulamak için kullanılır. Bu, her öğe için ayrı kurallar yazmak zorunda kalmadan farklı öğelere ortak bir stil kümesi uygulamak istediğinizde özellikle kullanışlıdır. Seçicileri gruplayarak daha kısa ve verimli CSS kodu yazabilirsiniz.

Bir grup seçicisi kullanmak için gruplamak istediğiniz seçicileri virgülle (,) ayırarak listelersiniz. İşte temel sözdizimi:

selector1, selector2, selector3 {
    property: value;
}

Örneğin, aynı metin rengini ve yazı tipi boyutunu tüm <h1>, <h2> ve <p> elemanlarına uygulamak istediğinizi varsayalım. Bunun gibi bir grup seçici kullanabilirsiniz:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

Bu örnekte grup seçici, tüm <h1>, <h2> ve <p> öğelerini hedefler. Bildirimler, tüm bu öğeler için metin rengini maviye ve yazı tipi boyutunu 16 piksele ayarlar.

Tür seçicileri, sınıf seçicileri ve ID seçicileri de dahil olmak üzere her türlü seçiciyi gruplayabilirsiniz:

h1, .highlight, #intro {
    background-color: yellow;
}

Görev

Kolay

Başlıklar (<h1>, <h2>), paragraflar (<p>) ve bir bölüm (<div>) dahil olmak üzere çeşitli öğeler içeren bir HTML belgesi verildi. Göreviniz, bu öğeleri biçimlendirmek için bir grup seçici kullanmaktır. Aşağıdaki adımları izleyin:

Tüm <h1> ve <h2> öğelerini hedefleyen bir grup seçici kullanarak bir CSS kuralı yazın. Bu öğelerin metin rengini kırmızı olarak ayarlayın.
Tüm <p> öğelerini ve <div> öğesini hedefleyen bir grup seçici kullanarak bir CSS kuralı yazın. Bu öğelerin arka plan rengini açık gri, yazı tipi boyutunu ise 18 piksel olarak ayarlayın.

Kendin dene

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>