:: selectie - CSS-trucs | CSS Almanac 2025

Gebruik je cursor om deze zin te selecteren. Merk op hoe terwijl u de tekst selecteert een achtergrondkleur de ruimte vult? U kunt de achtergrondkleur en kleur van geselecteerde tekst wijzigen door middel van stijl ::selection. Het opmaken van dit pseudo-element is geweldig om door de gebruiker geselecteerde tekst af te stemmen op het kleurenschema van uw site.

p::-moz-selection ( color: red) p::selection ( color: red; )

Houd er rekening mee dat de dubbele dubbele punt nodig is in de syntaxis voor dit pseudo-element, ondanks dat andere pseudo-elementen een enkele dubbele punt accepteren.

Zoals hierboven te zien is, kun je ::selectionop individuele elementen stylen . Je kunt ook de hele pagina opmaken door het blote pseudo-element in je stylesheet neer te zetten.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Er zijn slechts drie eigenschappen die ::selectionzullen werken met:

color
backgroundbackground-colorbackground-image
text-shadow

Zie de Pen :: selectietests door Chris Coyier (@chriscoyier) op CodePen.

Als u een stijl probeert te gebruiken ::selectionmet een eigenschap die niet op de lijst staat, wordt die eigenschap genegeerd. Het kan lastig zijn om backgroundin die lijst te zien, omdat de eigenschap alleen een kleur weergeeft wanneer deze wordt gebruikt ::selectionen geen achtergrondafbeelding of verloop.

Probeer dit ook niet:

p::-moz-selection, p::selection ( color: red; )

Wanneer browsers een deel van een selectie vinden die ze niet begrijpen, laten ze het hele ding vallen, dus dit zal altijd mislukken.

Een van de handigste toepassingen hiervoor ::selectionis het uitschakelen van a text-shadowtijdens selectie. Een text-shadowblikje botst met de achtergrondkleur van de selectie en maakt de tekst moeilijk leesbaar. Instellen text-shadow: none;om tekst tijdens selectie duidelijk en gemakkelijk leesbaar te maken.

Zie de Pen :: selection text-shadow door Chris Coyier (@chriscoyier) op CodePen.

Fancy :: selectie

In combinatie met Sass of een andere preprocessor kun je echt coole effecten maken ::selection. Selecteer de tekst in de onderstaande demo:

Mogelijk merkt u dat het effect in sommige browsers niet zo soepel is. Laten we die demo opslaan onder: dingen die mogelijk zijn, maar waarschijnlijk gewoon voor de lol.

Een ander stom maar leuk trucje is het onthullen van een afbeelding door middel van geselecteerde tekst.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.