בורר מזהה

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

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

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

#idname {
    property: value;
}

לדוגמה:

#intro {
    color: blue;
    font-size: 20px;
}

בדוגמה הזו, בורר ה-ID ‏#intro מכוון לרכיב עם המזהה "intro". ההצהרות מגדירות את צבע הטקסט לכחול ואת גודל הגופן ל-20 פיקסלים עבור רכיב זה.

אתגר

קל

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

הוסף מאפיין id עם הערך "special" לרכיב <div>.
כתוב כלל CSS באמצעות בורר ID שמכוון לרכיב שה-ID שלו הוא "special". הגדר את צבע הרקע של הרכיב הזה לצהוב ואת צבע הטקסט לאדום.

נסו בעצמכם

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