CSS ::selection - Style Selected Text

The CSS ::selection pseudo-element is used when we need to change the default style of selected portion of text, by user on a web page. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      ::selection {background-color: burlywood; color: white;}
   </style>
</head>
<body>

   <p>This is para one.</p>
   <p>This is para two.</p>
   <p>The three famous and most used web developing languages are, HTML, CSS, and JavaScript.</p>

</body>
</html>

This is para one.

This is para two.

The three famous and most used web developing languages are, HTML, CSS, and JavaScript.

Note - If you select some text from above three paragraphs, then the defined style will get applied to the selected portion.

List of Properties that can be applied to CSS ::selection

  • background
  • color
  • cursor
  • outline

CSS Online Test


« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook




Subscribe Us on YouTube