Styling List Item Markers

[00:00:00]
>> Continuing on here, I'm just gonna comment out this particular style just so it's not confusing. So the next thing I wanna talk about is styling these individual list item markers. So by default, as you know, when you're working with an unordered list, you get bullets. When you're working with an ordered list you, get Arabic numerals in order unless you apply some of those HTML attributes that I discussed earlier.

[00:00:27]
So it is possible, however, to override all of those bullets. Some of these values are built into CSS, some of them you can add to them. And so let us set up our unordered list, and these are all inherited properties, so we can display a lot of things here by this point in time.

[00:00:52]
So I'm gonna say, let's put a border on this 1px pixel solid red. That'll put a nice border around it so you know what we're talking about. We can put some padding on the top, 1rem, we can put padding on the bottom, 1rem. Okay, so that just gives us a little bit of room there.

[00:01:16]
That is what we're looking at, that first list at the top. And then we go to list-style-type. And there's a number of values for this, one of which would be square. That'll give you little squares. Isn't that cute? Also, there's a circle. Let's see. Circle and a bunch of other various types of colors here.

[00:01:47]
As we saw earlier, if we put a color on this, the list style will also take on that color as well, okay? So those are the ones that are built-in. What if you wanted to do something different? You absolutely can. For example, Mac people if you hit Ctrl or Cmd+Ctrl+Space, you'll get your emoji palette that comes up here.

[00:02:20]
I am not sure how to do this on Windows. Does anybody know how to pull up an emoji palette on Windows?
>> Windows+period.
>> Windows+period pulls up your palette on Windows. And let's say I want these fantastic unicorns in front of all of my list style items. So you pick out any of your emojis, and there they are.

[00:02:44]
That's so awesome, isn't it? Okay, so what would happen if I started to combine these with other various types of the nth-child selectors that we saw earlier? So add and I could say, for example, Maybe that's my default style type, and then I could say something like .unordered li:nth-child(3n).

[00:03:20]
So every third one, maybe I want my list-style-type, To be a rainbow. So now, we have unicorns and we have rainbows, and then we could then say .unordered li:nth-child, What? 3n+2, exactly what we just said, right? List-style-type would be something else. Does anybody have a suggestion? Maybe happy hearts.

[00:04:16]
Okay, so there we go. Now, we have a list that is alternating between unicorns, rainbows, and hearts. That's kind of fun. And it's a pattern, right? So once again, I haven't specifically assigned each list item to have a specific emoji, I've just assigned a pattern. And I've done that by, we have the unordered style there, where the list-style-type is a unicorn by default.

[00:04:42]
The other ones they come later and also have higher specificity in addition to working with cascade. They have list-style-types of different emoji, and they are utilizing the nth-child selector here to do a slightly different pattern. So now, we've offset these so that we get, in this case, unicorn, heart, rainbow, unicorn, heart, rainbow, unicorn, heart, rainbow.

[00:05:06]
All right, so let's go to the last unordered list that I have here. And for this one, I wanna do something a little bit different. I wanna use some SVGs for my list numbers here. And so to do that, I'm gonna go to fontawesome.com. Because this is where there's some SVGs, and we don't really care a lot about where these SVGs come from.

[00:05:36]
So Font Awesome is just a great place to go get an SVG. For trying something out, we're gonna use the free ones. And then from here, you can pick something that you enjoy. Let's say we want a shrimp. Because when else are you gonna get to use a shrimp icon, right?

[00:05:55]
Never are you gonna use a shrimp SVG anywhere in your work. So let's say we wanna use this one here. And if you roll your mouse over the icon that looks like a little HTML guy here, it'll say Copy SVG code. Let's copy that so that you've got that on your clipboard.

[00:06:15]
So the way we're gonna set this one up. So notice that in our last list here, we have some ordered bullet points here. We don't wanna select those, those are ordered bullet points, we really want those numbers to show. So I just wanna select the unordered list items.

[00:06:37]
So I'm going to say from my selector, what? We're gonna say .nested. And then what?
>> Unordered list items ul li.
>> Right, nested the direct children of nested. So that we will get just the li's that are associated with the unordered bullets but not the ordered bullets, right?

[00:07:02]
And then I'm gonna introduce you to a new sort of element, which is called marker, and marker is super cool. Marker is designed for, once again, selecting specific list items and changing the marker, which is the bullet that comes before them. So here, we can do something very cool with SVGs then.

[00:07:25]
And what we're going to say is content:url. And then inside of this, we're gonna paste in that whole thing here that comes from Font Awesome, Along with, I had some other things that came before that SVG tag here in my notes. What comes before that in my notes here is data:image/svg+xml; Charset =, UTF-8, Comma.

[00:08:19]
And then our SVG, that fills in here. And you'll see that we have a viewBox associated with that. But there's a couple of other properties that we can put in here for our SVG that will make it show. So you can see here that we have now gotten rid of those bullets.

[00:08:39]
So we've selected the right thing, but our SVG isn't showing, how can we get it to show? We're going to add a couple of additional properties. So what I'm going to add to this is a width, Of, 30. By the way, pro tip, you need to make sure you're managing your single quotes and your double quotes.

[00:09:04]
You probably know this from other areas of programming. But just make sure that that is in place because otherwise this will not work well. So just by putting in the width of 30, you wind up getting your little shrimpies in place here. We can, if you wish, also set a height, Of, I don't know, let's say 20, Okay, if you want them a little bit smaller.

[00:09:29]
And then you can also set your fill of something like hotpink. And now, you have little pink shrimpies in front of all of [LAUGH] your bulleted items, okay? Maybe that's something that you wanna do with shrimp, but maybe you have your company logo that you'd like to put in front of list items.

[00:09:49]
Maybe you have a whole bunch of PDFs. You can put your PDF icon in front of all those particular list items. Anything that is an SVG, you can wind up getting it to work this way using this list marker technique.