:: selecție - CSS-Tricks | Almanah CSS 2025

Folosind cursorul selectați această propoziție. Observați cum, în timp ce selectați textul, o culoare de fundal umple spațiul? Puteți schimba culoarea de fundal și culoarea textului selectat prin stilizare ::selection. Stilul acestui pseudoelement este excelent pentru potrivirea textului selectat de utilizator cu schema de culori a site-urilor.

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

Rețineți că dublu colon este necesar în sintaxă pentru acest pseudoelement, în ciuda faptului că alte pseudoelemente acceptă un singur colon.

După cum s-a văzut mai sus, puteți stiliza ::selectionpe elemente individuale. De asemenea, puteți stiliza întreaga pagină prin plasarea pseudo-elementului gol în foaia de stil.

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

Există doar trei proprietăți care ::selectionvor funcționa cu:

color
background( background-color, background-image)
text-shadow

Vedeți Pen :: testele de selecție de Chris Coyier (@chriscoyier) pe CodePen.

Dacă încercați să stilizați ::selectioncu o proprietate care nu este pe listă, atunci acea proprietate va fi ignorată. Poate fi dificil să vedeți backgroundîn acea listă, deoarece proprietatea va reda o culoare numai atunci când este utilizată ::selectionși nu va reda o imagine de fundal sau un gradient.

De asemenea, nu încercați acest lucru:

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

Când browserele găsesc o parte dintr-o selecție pe care nu o înțeleg, renunță la tot, deci acest lucru va eșua tot timpul.

Una dintre cele mai utile utilizări ::selectioneste oprirea a text-shadowîn timpul selecției. A se text-shadowpoate ciocni cu culoarea de fundal a selecției și poate face textul dificil de citit. Setat text-shadow: none;pentru a face textul clar și ușor de citit în timpul selecției.

Vedeți Pen :: selection text-shadow de Chris Coyier (@chriscoyier) pe CodePen.

Fancy :: selection

Împreună cu Sass sau cu orice alt preprocesor, puteți face efecte foarte cool cu ::selection. Selectați textul din demonstrația de mai jos:

Este posibil să observați că efectul nu este atât de neted în unele browsere. Să depunem această demonstrație sub: lucruri posibile, dar probabil doar pentru distracție.

Un alt truc prost, dar distractiv, este dezvăluirea unei imagini prin textul selectat.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.