FREELessons: 10Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Comma-Separated Lists

In this lesson, you’ll learn a very simple trick for turning an HTML unordered list into a nicely styled comma-separated list that reads like a sentence.

Relevant Links

2.3 Comma-Separated Lists

Hello and welcome back. In this lesson we're gonna take a look at how to take in unordered list and turn it into a comma separated list that reads like a sentence. So you can find the URL for our starting Pen in the course notes for this lesson. Once you've opened that up, go ahead and click on fork and we'll get started. So you'll notice we have an unordered list here we a class of todo. Everything that we do in this lesson is going to be in our CSS, and this is actually a very simple process. The first thing I want to do is to get rid of the default padding on the left side of our list. So we're going to point to the class of todo, and we're going to set padding left to zero. And that'll get rid of our left padding, you'll notice that also got rid of the bullet points there. And then I'm going to jump into the individual list items and set their display properties to inline, that way it'll real like a sentence, they'll show up next to each other. But we have a little bit of a problem here because all of the words just kind of run together and it's very difficult to read. So what I wanna do is I wanna put commas in between each of these list items. So I'm gonna take all of the list items, except for the last one and put a comma after it. So the way we do that in CSS is, once again, we'll point to our todo class and we're gonna point to the list items in that todo class but we wanna specify the list items that are not the last child of that list. So we're gonna say colon not and then inside parenthesis colon last-child. So again we're gonna take all those items except for the last one and put a comma after those list items. So the way we do that, is just after the closing parenthesis there, we're gonna say, :after. And then inside curly brackets, we're gonna set the content property here inside quotation marks to a comma. And now you'll see that each of these list items has a comma in it, and I'm gonna put a semicolon there to end that statement. So now we have a bunch of commas but again, I want this to read like a sentence. So we have our list of items but then just before this last item I want the word and in there. So again we're gonna point to the todo class. We're gonna point to the last list item, so li:last-child in before that particular item, :before, we're gonna set the content equal to the word and. And you'll notice that we need to space after the and, so let's put that inside the quotation marks there, and there we go. Then the last thing I want to do is to put a period at the end of the sentence and then bring this list up so that it's right next to the first part of that sentence. So let's go to the next line here. We are going to create another todo. It is gonna go after that last-child, so li:last-child:after. And we're gonna set the content here to a period. And that will end our sentence with a period. And then I wanna take this entire un-ordered list and move it up next to the text at the top. And the way I'm gonna do that is I'm just gonna take this to do class which points to the entire list as a whole and I wanna set it's display to inline. Right now the list item have a display of inline, so the list items will show up right next to each other but the ul as a whole Is still a block level element. So we're gonna change that by setting this display to inline as well, and that should get us where we wanna be. And that's how you can create a comma separated list out of an unordered list in HTML and CSS. Thank you for watching, and I'll see you in the next lesson.

Back to the top