נוכחות וערכים מדויקים

שיעור 12 מתוך 15 בקורס בוררי CSS של Coddy.

בשיעור הזה תלמדו על בוררי נוכחות של מאפיינים ועל בוררים לפי ערך מדויק. בוררי מאפיינים משמשים לבחירת רכיבים על סמך נוכחות או היעדר של מאפיין, או על סמך הערך המדויק של מאפיין.

בורר נוכחות של מאפיין:

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

דוגמה:

/* בוחר את כל האלמנטים עם המאפיין "target" */
[target] {
   color: blue;
}

בורר לפי ערך מדויק:

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

דוגמה:

/* בוחר את האלמנט בעל המאפיין "data-type" שערכו "important" */
[data-type="important"] {
   font-weight: bold;
}

דוגמאות קוד:

HTML:

<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>

CSS:

[target] {
   text-decoration: underline;
}
[data-type="important"] {
   color: red;
}

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

אתגר

קל

הוטלה עליך המשימה לעצב טופס HTML פשוט באמצעות בוררי מאפיינים.

החל את הסגנונות הבאים באמצעות בוררי מאפיינים:

הוסף גבול green לשדות קלט שהמאפיין type שלהם מוגדר ל-"text".
שנה את צבע הרקע של שדות קלט שהמאפיין type שלהם מוגדר ל-"email" ל-lightblue.
הגדר את צבע הטקסט של שדות קלט שהמאפיין type שלהם מוגדר ל-"password" ל-red.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
    /* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    
    <input type="submit" value="Submit">
</form>
</body>
</html>

כל השיעורים ביחידה בוררי CSS

1מבוא לבוררי CSS

מטרת בוררי CSS למה הם חשובים?

4בוררי מאפיינים

מבוא לבוררי מאפייניםנוכחות וערכים מדויקיםבוררי ערכי מאפיינים בוררי ערכי מאפיינים II בוררי ערכי מאפיינים III

2בוררים פשוטים

בוררי סוג בוררי מחלקה בוררי מזהה בוררים אוניברסליים

3בוררי קומבינטורים

בורר ילד בורר צאצא בורר אח סמוך בורר אחים כללי

תרגלו בעצמכם: Web אונליין