Style selected text using ::selection

Key Takeaways

Apparently a lot of people don't know about the selection pseudo element. So really quickly you can just come in with a selection and you can do something like background is yellow. And now when you select something instead of being the default colors it will use that yellow but you can't see your text. So you might want to also come in with something like a color of black to then actually make the text readable for your selections. And you don't have to come in with a solid color. We can do like an HSL. And then we can do something like a 0.5 for the opacity just to make it blend in with the background a little bit compared to if this was a one. So I'm on a black background, but something else would uh show through a little bit better if you tone it down with a lower opacity. And while you're at that, if you need to, I don't know why you would, but you could say something like ul selection as well. And we could come in with a custom color like the background on this one for some reason could be red. So we go and select everything. It is coming in with blue. We'd probably want to change our text back over to white for those. But as we're selecting all of that, we get the blue and then we get the red down here for the UL. Now, there's only a limited selection of properties you can change with the selection pseudo element, but it's a nice way to customize the look of your website a little bit instead of having just that default that every other website has where you can make the selection actually themed to your color theme instead of being this boring blue like every other website on the unit.