בוררים קבוצתיים

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 14 מתוך 76.

בורר קבוצתי משמש לבחירת כמה רכיבי HTML ולהחלת אותם סגנונות על כולם. הדבר שימושי במיוחד כשרוצים להחיל קבוצת סגנונות משותפת על רכיבים שונים בלי לכתוב כללים נפרדים לכל רכיב. באמצעות קיבוץ בוררים אפשר לכתוב קוד CSS תמציתי ויעיל יותר.

כדי להשתמש בבורר קבוצתי, יש לרשום את הבוררים שרוצים לקבץ, כשהם מופרדים בפסיקים (,). הנה התחביר הבסיסי:

selector1, selector2, selector3 {
    property: value;
}

לדוגמה, נניח שרוצים להחיל את אותו צבע טקסט ואת אותו גודל גופן על כל הרכיבים <h1>, <h2> ו-<p>. אפשר להשתמש בבורר קבוצתי כך:

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

בדוגמה הזו, בורר הקבוצות מכוון לכל הרכיבים מסוג <h1>, <h2> ו־<p>. ההצהרות מגדירות את צבע הטקסט לכחול ואת גודל הגופן ל־16 פיקסלים עבור כל הרכיבים האלה.

אפשר לקבץ כל סוג של בוררים, כולל בוררי סוג, בוררי מחלקה ובוררי מזהה:

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

אתגר

קל

נתון לך מסמך HTML עם מגוון רכיבים, כולל כותרות (<h1>, <h2>), פסקאות (<p>) וחלוקה (<div>). המשימה שלך היא להשתמש בבורר קבוצתי כדי לעצב את הרכיבים האלה. בצע את השלבים הבאים:

כתוב כלל CSS באמצעות בורר קבוצתי שמכוון לכל רכיבי <h1> ו-<h2>. הגדר את צבע הטקסט של הרכיבים האלה לאדום.
כתוב כלל CSS באמצעות בורר קבוצתי שמכוון לכל רכיבי <p> ולרכיב <div>. הגדר את צבע הרקע של הרכיבים האלה לאפור בהיר ואת גודל הגופן ל-18 פיקסלים.

נסו בעצמכם

<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>