⊗mkPmSlGSS 78 of 250 menu

Søskende-selektor i CSS

Søskende-selektoren ~ giver mulighed for at vælge alle elementer, der kommer efter det angivne element inde i samme forælderelement.

Eksempel

Lad os henvende os til alle p-tags, der kommer efter h2-tags, og farve dem røde:

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

:

Eksempel

Lad os henvende os til alle p-tags, der kommer efter elementer med klassen .test, og farve dem røde:

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

:

Eksempel

Lad os henvende os til alle elementer med klassen .elem, der kommer efter elementer med klassen .test, og farve dem røde:

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

:

Praktiske opgaver

Givet koden:

<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>

Skriv en selektor, der vælger alle elementer, der kommer efter elementet #elem.

Dansk
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDeutschΕλληνικά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
Vi bruger cookies til webstedets funktion, analyse og personalisering. Behandling af data foregår i henhold til Fortrolighedspolitikken.
accepter alle tilpas afvis