Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Layout Lists

Why are my ul and ol rules not working?

When I do like this:

ul { display: inline; padding: 0 5px; border-left: solid 1px; border-right: solid 1px; }

it doesn't work, the rules are not applied to any of my ul-lists.

However if i add li, like this:

ul li { display: inline; padding: 0 5px; border-left: solid 1px; border-right: solid 1px; }

it works perfectly fine.

This is pretty inconvenient since I want to make different rules for my ul, ol and li and now I can't do that since I guess li is already taken? Why isn't it working with only ul?

3 Answers

Antti Lylander
Antti Lylander
9,686 Points

You can use classes and id's to identify elements.

The answer to your main question is: ul is an element inside of which li elements are nested. You need separate rules for ul's and li's. You probably don't want the same borders and paddings applied to both. Say, you want much space around the list, but not in between the list items. To accomplish that, you need two rules. It is not inconvenient.

I'm not sure i understand. If you look at my code, the first one (where i state ul) doesn't work. When i do the second one (where I state ul li), which is exactly the same rules as the first one, that is display, padding and border-left/right, it works.

I don't understand why it doesn't work when I use only 'ul' and it does work when i use 'ul li'. I DON'T want to use 'ul li', I only want to use 'ul', but, as I said, if I do that it doesn't work.

Antti Lylander
Antti Lylander
9,686 Points

https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style_colors maybe this helps you understand how it works.

when you say "ul does not work" and "ul li works" it is because only the latter is targeting the element you want to style, the list item itself.