cascading style sheets reference

בוררי הילד הראשון

הסבר

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

תחביר

לבורר הילד הראשון יש תחביר דומה מאוד לבורר פסדו-אלמנט (למרות שהוא לא פסדו-אלמנט מכיוון שכאשר השורה הראשונה או האות הראשונה של אלמנט מסויים הם לא באמת אלמנטים של HTML, הילד הראשון הוא אלמנט HTML כשלעצמו). התחביר הוא בורר (באופן נפוץ, אך לא בהכרח בורר אלמנט HTML פשוט), שאחריו בא

:first-child

לדוגמא:

p:first-child

בוחר כל פיסקה שהיא כאשר היא האלמנט הראשון המוכל ע"י ההורה שלה.

חשבו על המצב הבא

<div class="introduction">
<p>...</p>
<p>...</p>
</div>

בורר הילד הראשון, למעלה, יבחר רק את הפיסקה הראשונה ב-DIV.

שימוש

חשבו על התסריט הבא - יש לנו פרק בספר כדף אתר. כאשר הפרק מחולק לחלקים, אנו יוצרים div, ולסמן את כל הפסקאות הראשונות בשימוש במעמד זה. בעזרת CSS2 אנו יכולים להשתמש בוררי הילד הראשון, כדי לחסוך את הטירחה. פירושו גם שאם עורכים את הפרק מאוחר יותר, כדי להסיר פסקאות מסויימות, או לסדר מחדש את הסדר שלהן, אנו לא צריכים לערוך מחדש את מקור ה-HTML. יותר מכך, ע"י סימון של כל פסקה ראשונה כמעמד פסקה-ראשונה, אנו מציגים בעדינות מראה אל תוך ה-HTML שלנו, שכפי שראינו יש להימנע מכך.

ע"י דגימה, הבורר עבור הבחירה למעלה של כל ילד ראשון של DIV-יםתהיה:

div.section p:first-child.

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