CSS In-Depth, v2 CSS In-Depth, v2

Selection & More Pseudo Elements

Check out a free preview of the full CSS In-Depth, v2 course:
The "Selection & More Pseudo Elements" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

After showing how to style selected text, and not allowing text to be selected on touch devices, Estelle provides a quick overview on how to discover different browser-specific shadow pseudo elements.

Get Unlimited Access Now

Transcript from the "Selection & More Pseudo Elements" Lesson

[00:00:03]
>> Estelle Weyl: So the selection, which I didn't go deep into, I'm going to go a little bit deeper into that. We saw this slide, and background color, that's actually not the class. Cuz that's more like an orange and that was more of a deep red. The reason that I want to go into more into selection is because sometimes selection is something you want very rarely, but it's sometimes something you want to disable.

[00:00:27] The only times you want to disable it is on a mobile device, when someone is doing some type of action, and you don't want the, take a picture of this to show up. Sometimes when someone hovers over something too long, it's to exit and you would get a copy paste or you get a drop this image here or something like that.

[00:00:45] So you can disable selection. That is the only case where you want to disable it is on a mobile device when you have an interactive thing that someone might be touching your screen for a long time. And you don't want the native feature of copying or dropping an image or anything like that showing up.

[00:01:02] So this is something you should almost never use, but just know that it's available.
>> Estelle Weyl: So,
>> Estelle Weyl: If you do these things, so you can do -webkit-tap-highlight-color, you can target it like that, you can change the color. You can say user select none and you can touch call out none.

[00:01:26] And it wasn't attached to this or otherwise that wouldn't been able to select it. So I just want you to know that those are available if you need them, but don't use them because, it's kind of, I think the term is asshole-letic thing to do.
>> Estelle Weyl: And then there's browser specific pseudo elements.

[00:01:45] There's a lot of there's basically a shadow dom, and there's a lot of elements on the page which you don't style. You don't style the scroll bar, generally but you can. And so these are different values for Microsoft, I'm not saying these are valid anymore, if they exist.

[00:02:03] These are ones that have existed. Webkit has ones like you can target the progress bar, the progress value, the inner spin button on a number input type. You can actually style them and you would do so by targeting the, these are non standards but there are tons and tons of pseudo elements that exist.

[00:02:23] There's just hidden in the shadow dom. So here, if you see the scroll bar, I made it orange when you hover over it. And you can drag it, and it's round and I did that, oops. I did that by targeting it, so I have the webkit scroll bar, which I've made orange.

[00:02:47] I've made the track semi translucent black over it, so it's a little bit darker. I made this thumb a different color orange, when the window's inactive I did some background of gray. When I hover over it here it turns royal blue. That's this right here, scroll bar. The part of the scroll bar thumb, right?

[00:03:10] When it's hovered I make it blue. So that's the kind of stuff that the browser is actually styling behind the scenes. And how did I find out about all of these different things? The dev tools. The dev tools will show you everything. When you hit here, and I'm not gonna actually take long enough to go find it, what's going on.

[00:03:39] But in my dev tools,
>> Estelle Weyl: There is my style. I told you I'll put a style block and,
>> Estelle Weyl: And then I have a grammarly button. And that is because I have grammarly. Do you question what grammarly is? It's an awesome extension and that's why I don't have many typos.

[00:04:08]
>> Speaker 2: [LAUGH]
>> Estelle Weyl: So I can't actually find it for you now. But when you look over here, I'm just gonna go back. Select the style, go here, go down, and sometimes it has all sorts of information, and yes it does, right here. The scroll bar element, the pseudo scroll bar element, scroll bar colon colon webkit scroll bar and there it is.

[00:04:43] So the dev tools provide you with all sorts of information. And not only that, but if you do computed-style, and here, it has just the ones that are declared. But if I do Show All, it adds all these other styles, or properties that I'd never heard about. So like, max-zoom, I don't know what that does.

[00:05:11] I kind of do know what that does. What does R do? I think that's the radius for an svg circle, but I don't know. Since it's new I could look it up. Except for I can't, because have you ever tried doing a search for the letter R? Except for below it says RX and RY, so I'm pretty sure it's an SVG property.

[00:05:34] Scroll snap type. That's something cool to look up. So use your developer tools as a learning tool. Back to the content of our slides. We finished selectors.