How Does Selection Modifier Work in Tailwind?
In Tailwind CSS, the selection modifier is a pseudo-class used to style the text or elements that are currently selected by the user. By default, the selected text has a white text color and blue background color in most browsers. However, Tailwind permits users to customize these styles, control the background color, and text color of selected text using the selection modifier classes.
This article will demonstrate the working of the selection modifier in Tailwind.
How Does Selection Modifier Work in Tailwind?
To determine how the selector modifier works in Tailwind, it is required to add the “selection” class before other utility classes in the HTML program for styling the desired text or element. Then, ensure it works by viewing the HTML web page.
Let us explore the below steps:
Step 1: Use the Selection Modifier in HTML Program
Make an HTML program and use the “selection” modifier with the desired utility class to style the text or element. For instance, we have used the “selection” modifier with the “<h2>” and “<p>” elements:
<div class="h-screen p-10 bg-purple-400">
<h2 class="text-4xl text-white selection:bg-yellow-500 selection:text-black">
Introduction to Tailwind CSS
</h2>
<p class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
Tailwind CSS is a utility-first framework for building custom user interfaces. It provides a collection of classes that enable users to style elements directly without writing any CSS code. Users can combine these classes to create any design with full control over every aspect of the layout, typography, colors, and more. Its pre-defined classes make styling HTML components more efficient, faster, and more consistent.
</p>
</div>
</body>
Here, in <h2> element:
-
- The “text-4xl” class sets the font size of the text to 4xl.
- The “text-white” sets the white color to the text.
- The “selection:bg-yellow-500” class sets the yellow color to the background when the text is selected or highlighted by the user.
- The “selection:text-black” class changes the selected text’s color to black.
In the <p> element:
-
- “selection:bg-fuchsia-300” class changes the background color to fuchsia when the text within the <p> element is selected.
- “selection:text-fuchsia-900” class sets the text color of the selected text within the <p> element to a darker shade of fuchsia.
Step 2: Verification
To ensure that the selection modifier is working properly, view the HTML web page:
It can be observed that when the user selects the text of the web page, its font color and background color changes according to which the selection modifier is specified.
Conclusion
The selection modifier is utilized to style the text or elements that are currently selected by the user. It is used in the HTML program by adding the “selection” class before other utility classes for styling the desired text or element. This article has demonstrated the working of the selection modifier in Tailwind.
Source: linuxhint.com