Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
css

What is the ::selection pseudo-element in CSS?

Programming Bytes

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

The ::selection pseudo-element allows us to change the color, background color, and text shadow by selecting the text with the cursor.


Changing the color of the text when highlighted


Changing the background and color of the text when highlighted


Adding a text shadow to the text when highlighted


The ::selection element will also work on input and text area.

Let’s create an example: when highlighting the text on the text area or input, we will set a black background with the white text color.


All examples combined


We can also use different selection styles for nested elements. Let’s create a div with a span element inside; then, we’ll set different selection styles to the div and span elements.

RELATED TAGS

communitycreator
css

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring