Grup Seçiciler

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 14 / 76.

Group selector, birden fazla HTML elemanını seçmek ve hepsine aynı stilleri uygulamak için kullanılır. Bu, özellikle her eleman için ayrı rules yazmak zorunda kalmadan farklı elemanlara ortak bir stil kümesi uygulamak istediğinizde yararlıdır. Selector'ları gruplayarak daha kısa ve verimli CSS kodları 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çicisi tüm <h1>, <h2> ve <p> elemanlarını hedefler. Bildirimler, tüm bu elemanlar için metin rengini blue ve font boyutunu 16 piksel olarak 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ölme (<div>) dâhil olmak üzere çeşitli öğeler içeren bir HTML belgesi veriliyor. Göreviniz, bu öğeleri stillendirmek için bir grup seçici (group selector) kullanmaktır. Aşağıdaki adımları takip edin:

Tüm <h1> ve <h2> öğelerini hedefleyen bir grup seçici kullanarak bir CSS kuralı yazın. Bu öğelerin metin rengini red 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 lightgray ve yazı tipi boyutunu 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>