Questions
15 of 45
1What is a pseudo-element in CSS?
2How are pseudo-elements different from pseudo-classes?
3What is the syntax of a pseudo-element?
4Name some commonly used pseudo-elements.
5What does the ::before pseudo-element do? What does the ::after pseudo-element do?
6How can you insert content using pseudo-elements?
7What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?
8What does the ::first-letter pseudo-element do?
9What does the ::first-line pseudo-element do?
10How can you style the first line of a paragraph differently?
11Can pseudo-elements be styled with animations or transitions?
12What’s the difference between using ::before and ::after?
13Can pseudo-elements be positioned using CSS positioning properties? Can pseudo-elements have background images or colors? How can you use pseudo-elements to create shapes or icons?
14Can you use multiple pseudo-elements on the same element?
15What is the ::selection pseudo-element used for?
16How does stacking and z-index affect pseudo-elements?
17Can pseudo-elements have child elements or content inside them?
18Can you apply pseudo-elements to replaced elements (like <img>)?
19How do pseudo-elements interact with display and overflow properties?
20What’s the difference between using pseudo-elements and real elements for decoration?
21How does inheritance work with pseudo-elements?
22Can pseudo-elements trigger JavaScript events (like click)?
23How can you control the generated content with pseudo-elements using attr()?
24Can pseudo-elements be used inside flex or grid layouts?
25How do you control the stacking order of ::before and ::after pseudo-elements?
26How can you create a tooltip using pseudo-elements?
27How can you make a custom underline or highlight effect using ::after?
28How can you make a quotation mark appear before a paragraph using pseudo-elements?
29How do you create a triangle or arrow shape using only CSS pseudo-elements?
30How can you use pseudo-elements to add icons without extra markup?
31How can you create a button hover animation using ::before or ::after?
32How can pseudo-elements help in implementing skeleton loaders or shimmer effects?
33How can you use ::before and ::after to clear floats?
34How can you create a border animation using pseudo-elements?
35How can pseudo-elements be used in responsive design?
36What is the ::marker pseudo-element and when is it used?
37What does the ::placeholder pseudo-element do?
38How does ::cue work with media elements?
39What is ::backdrop, and where is it used?
40What is the difference between ::file-selector-button and other input pseudo-elements?
41How does the ::part() pseudo-element work in Web Components?
42How is ::slotted() different from ::part() in shadow DOM styling?
43Can you style text highlights with pseudo-elements?
44How can ::selection be customized for accessibility and branding?
45What are the limitations of pseudo-elements compared to actual DOM elements?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
15 / 45

What is the ::selection pseudo-element used for?

Difficulty: 3/10
CSS pseudo-elements, user selection styling, cross-browser consistency

Using the ::selection Pseudo-Element in CSS

The ::selection pseudo-element in CSS allows you to style the portion of text that a user highlights (selects) with their cursor. It provides a way to customize the appearance of selected text, such as changing its background color, text color, or adding other visual effects.

Key Points
  1. 1

    ::selection applies only to the text a user selects.

  2. 2

    You can style properties like color, background-color, text-shadow, and cursor.

  3. 3

    Not all CSS properties are supported; mainly visual text properties work.

  4. 4

    It works on most elements that contain selectable text.

Example: Styling Selected Text

In this example, when the user selects the paragraph text, the background changes to blue, the text color becomes white, and a subtle text shadow is applied, enhancing the visual feedback of text selection.

Best Practices
  1. 1

    Use ::selection to improve user experience and match your site's color scheme.

  2. 2

    Keep contrast high for readability when styling selections.

  3. 3

    Test across different browsers, as some older browsers may have limited support.

  4. 4

    Avoid adding complex animations or non-text styles, as these are not supported.

Scenario Questions

0-2 years experience

  1. 1How would you change the background color of selected text to yellow in a paragraph, and what CSS properties would you avoid using?
  2. 2What happens if you write ::selection { color: red; background: blue; } but the selection doesn’t change—what’s the first thing you’d check?

2-5 years experience

  1. 1Our app has a dark mode theme, and when users highlight text, the selection becomes unreadable—how would you debug and fix this?
  2. 2A designer wants selected text to have a gradient background using ::selection, but it’s not working—why, and what’s your workaround?

5-8 years experience

  1. 1We’re building a rich-text editor and need consistent selection styling across Chrome, Safari, and Firefox—how do you architect this without bloating CSS or causing layout shifts?
  2. 2A third-party library overrides ::selection globally, breaking our UI—how would you isolate or override it without affecting other components?

8+ years experience

  1. 1We’re migrating a legacy UI from IE11 to modern browsers and need to preserve selection styling—how do you handle vendor prefixes and fallbacks at scale without introducing technical debt?
  2. 2How would you design a design system token for selection styling that accommodates accessibility, theming, and cross-platform consistency across web, PWA, and embedded webviews?

Follow-up Questions

  • What happens if you try to set font-size on ::selection?
  • Have you ever seen ::selection break in a dark mode theme?
  • How would you test this across browsers?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.