בורר אחים כללי
חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 5 מתוך 43.
בורר האחים הכללי (~) בוחר את כל הרכיבים שהם אחים של רכיב מסוים ומופיעים אחריו.
לדוגמה:
<div>
<p>Paragraph 1</p>
<h2>Heading</h2>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>עם ה-CSS הזה:
h2 ~ p {
color: blue;
}לאחר החלת ה-CSS הזה, התוצאה תהיה:
- פסקה 1 נותרת ללא שינוי (היא אינה אח שנמצא אחרי h2)
- פסקה 2 הופכת לכחולה (היא אחות שמופיעה אחרי h2)
- פסקה 3 הופכת לכחולה (היא אחות שמופיעה אחרי h2)
אתגר
קלצרו כלל CSS באמצעות בורר האחים הכללי, כדי שכל רכיבי <p> שמופיעים אחרי רכיב ה־<h1> יזהרו בצבע ורוד בוהק (#ff69b4).
נסו בעצמכם
<html>
<head>
<title>General Sibling Selector</title>
<style>
/* CSS solution goes here */
</style>
</head>
<body>
<h1>Welcome to the Party!</h1>
<p>Grab a drink.</p>
<p>Say hello to new friends.</p>
<div>Dance floor area</div>
<p>Take a selfie!</p>
<p>Enjoy the snacks.</p>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה שליטה ב-CSS
תרגלו בעצמכם: Web אונליין