בורר אחים כללי

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

בוררי אחים כלליים מאפשרים לבחור רכיבים שיש להם אותו הורה ומופיעים אחרי רכיב מסוים. בורר זה מסומן באמצעות הסימן טילדה (~).

תחביר:

element ~ target-element {
    /* סגנונות המוחלים על target-element */
}

דוגמה:

HTML:

<div class="box"></div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="highlight"></div>
<p>Paragraph 4</p>

CSS:

.box ~ p {
    color: gray;
}

בדוגמה שלפניכם, הצבע של הטקסט בכל רכיבי <p> שמופיעים אחרי הרכיב <div class="box"> יוגדר לאפור. בורר האחים הכללי (~) בוחר ומעצב את רכיבי <p> שמופיעים אחרי הרכיב <div> שצוין.