Grup Seçiciler

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

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

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

selector1, selector2, selector3 {
    property: value;
}

Örneğin, tüm <h1>, <h2> ve <p> öğelerine aynı metin rengini ve yazı tipi boyutunu uygulamak istediğinizi varsayalım. Şu şekilde 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çiciler, sınıf seçiciler ve ID seçiciler dahil olmak üzere her tür seçiciyi gruplandırabilirsiniz:

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

Görev

Kolay

Size başlıklar (<h1>, <h2>), paragraflar (<p>) ve bir bölüm (<div>) dahil olmak üzere çeşitli öğeler içeren bir HTML belgesi verilmiştir. Göreviniz, bu öğeleri stillendirmek 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 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.

Kopya kağıdı

Grup seçici, seçicileri virgülle (,) ayırarak aynı stilleri birden fazla HTML öğesine uygulamanıza olanak tanır:

selector1, selector2, selector3 {
    property: value;
}

Öğe seçicileri gruplandırma örneği:

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

Herhangi bir seçici türünü (tür, sınıf, ID) gruplandırabilirsiniz:

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

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>