Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nathalie Agnekil
6,665 PointsWhy 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
9,686 PointsYou 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.
Nathalie Agnekil
6,665 PointsI'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
9,686 Pointshttps://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.