בורר מחלקה

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

בורר המחלקה משמש לבחירת רכיבי HTML על סמך הערך של מאפיין ה-class שלהם. הוא מאפשר לך להחיל את אותם סגנונות על כמה רכיבים במסמך שלך. בוררי מחלקה שימושיים במיוחד כשרוצים לעצב קבוצת רכיבים באותו אופן, ללא קשר לשמות התגים שלהם.

כדי לבחור רכיבים עם מחלקה מסוימת ב-CSS, משתמשים בנקודה (.) ואחריה בשם המחלקה. הנה התחביר הבסיסי לשימוש בבורר מחלקה:

.classname {
    property: value;
}

לדוגמה:

.highlight {
    background-color: yellow;
    color: black;
}

בדוגמה הזו, בורר המחלקה .highlight חל על כל האלמנטים עם המחלקה "highlight". ההצהרות מגדירות את צבע הרקע של האלמנטים האלה לצהוב ואת צבע הטקסט לשחור.

אתגר

קל

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

הוסף מאפיין class עם הערך "blue-text" לרכיב <h1> ולרכיב <p> הראשון.
הוסף מאפיין class עם הערך "large-text" לרכיב <h2> ולרכיב <p> השני.
כתוב כלל CSS באמצעות בורר מחלקה שבוחר את כל הרכיבים עם המחלקה "blue-text". הגדר את צבע הטקסט של הרכיבים האלה לכחול.
כתוב כלל CSS באמצעות בורר מחלקה שבוחר את כל הרכיבים עם המחלקה "large-text". הגדר את גודל הגופן של הרכיבים האלה ל־24 פיקסלים.

נסו בעצמכם

<html>
<head>
    <title>Class Selector</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>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>