⊗mkPmSlGSS 78 of 250 menu

Съседен селектор в CSS

Съседният селектор ~ позволява да изберете всички елементи, намиращи се след зададения елемент в рамките на един родител.

Пример

Нека се обърнем към всички тагове p, намиращи се след таговете h2, и да ги оцветим в червено:

<div> <h2>text</h2> <p> +++ </p> <p> +++ </p> <p> +++ </p> </div> <p> - </p> h2 ~ p { color: red; }

:

Пример

Нека се обърнем към всички тагове p, намиращи се след елементи с клас .test, и да ги оцветим в червено:

<div> <p class="test"> text </p> <p> +++ </p> <p> +++ </p> </div> <p> --- </p> .test ~ p { color: red; }

:

Пример

Нека се обърнем към всички елементи с клас .elem, намиращи се след елементи с клас .test, и да ги оцветим в червено:

<div> <p class="test"> text </p> <p class="elem"> +++ </p> <p> --- </p> <p class="elem"> +++ </p> </div> <p> --- </p> .test ~ .elem { color: red; }

:

Практически задачи

Даден е кодът:

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li id="elem">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>

Напишете селектор, който ще избере всички елементи, намиращи се веднага след елемента #elem.

Български
AfrikaansAzərbaycanবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне