', אז נוכל להתאים את הסגנון של אלמנט האב על ידי החזקת הילד. למטרה זו, אנו יכולים להשתמש ב' :יש ל() ' בוחר.

משני הרכיבים '

', בחר את זה שמכיל את האלמנט '

' באמצעות ' ‎.class-name:has(ילד-שם) ”:

.parent-div : יש ל ( h1 ) {

צבע רקע : #103e6d ;

צֶבַע : צֶדֶף ;

רוֹחַב : 150 פיקסלים ;

גוֹבַה : 150 פיקסלים ;

רדיוס הגבול : חמישים% ;

יישור טקסט : מֶרְכָּז ;

}

כאן, החלנו את מאפייני ה-CSS הבאים על אלמנט האב:

---

---

• ' צבע רקע ' משמש לציון צבע הרקע של האלמנט.
• ' צֶבַע ' מציין את צבע הטקסט של האלמנט.
• ' רוֹחַב ' משמש להגדרת רוחב האלמנט.
• ' גוֹבַה ” מציין את גובה האלמנט.
• ' רדיוס הגבול 'מאפיין משמש להגדרת הפינות המעוגלות של האלמנט.
• ' יישור טקסט ' מציין את יישור הטקסט.

תְפוּקָה

כיצד בוחרים את כל רכיבי הילד?

כדי לבחור את האלמנט הבן בעזרת בורר האב, עברו על הדוגמה הנתונה.

דוגמא

בצע את השלבים הבאים ליצירת דף HTML:

• הוסף רכיב div המכיל שניים '

  ' תגיות ו'

  'תג עם הכיתה' ילד-div '.
• הילד ' div אלמנט ' מכיל רכיב '

  ':

< div מעמד = 'הורה-div' >

< ע > שלום < / ע >

< ע > עוֹלָם < / ע >

< div מעמד = 'ילד-div' >

< ע > אני ילד div < / ע >

< / div >

< / div >

אנו יכולים לבחור רכיבי צאצא דרך ההורה '

' מעמד. זה לא רק יבחר ישירות שלו' ע ' רכיבים אבל גם בוחר את ' ע ' אלמנטים:

.parent-div ע {

צבע רקע : #7F167F ;

משפחת גופן : רָהוּט ;

גודל גופן : 25 פיקסלים ;

יישור טקסט : מֶרְכָּז ;

צֶבַע : עשן לבן ;

}

תְפוּקָה

כיצד לבחור את כל האלמנטים של Direct Children?

כדי לבחור את הילד הישיר של div האב, נוכל להשתמש ב-' > 'סמל. זה יעזור לבחור את כל האלמנטים 'p' שהם הילד הישיר של ההורה '

'. לדוגמה, יישמנו את מאפייני ה-CSS הבאים:

.parent-div > ע {

צבע רקע : #7F167F ;

משפחת גופן : רָהוּט ;

גודל גופן : 30 פיקסלים ;

יישור טקסט : מֶרְכָּז ;

צֶבַע : עשן לבן ;

}

ה ' משפחת גופן ' מציין את הגופן של האלמנט הנבחר ו- ' גודל גופן ' משמש להגדרת גודל הגופן:

תְפוּקָה

דיברנו על בוררי הורים של CSS ב-HTML ו-CSS.

סיכום

ב-CSS, ה' :יש ל() הבורר משמש כפסאודו-קלאס בורר אב. הוא משמש במיוחד לבחירת רכיבי אב. לדוגמה, ' .parent-div:has(h1) ' בוחר את רכיב האב בעל '

' אלמנטים. על מנת לבחור את הרכיב הבן של אלמנט האב, השתמש ב-' .הורה-div p '. ניתן להשתמש בהצהרת התנאי גם כדי לבחור את כל רכיבי הצאצא הישירים. מאמר זה הסביר את בורר האב של CSS עם דוגמאות.