Reputation:
I have an unordered list which I am using for my navigation. I am then using another unordered list in my main page for a list of equipment that was used for my photography.
When I go to style only my top navigation ul
, it starts styling the ul
and li
of the equipment. Code below (not finished it yet, but am in process of creating horizontal menu):
HTML
Navigation:
<nav id="page-navigation">
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
<ul>
<li><a href="_portfolio/photography.html" title="Photography">Photography</a></li>
</ul>
</ul>
</nav>
Equipment:
<h1>Equipment:</h1>
<ul id="equipment">
<li>Canon EOS 600D.</li>
<li>Canon EF 100mm f/2.8 Macro USM Lens.</li>
<li>Canon EF-S 18-55mm f/3.5-5.6 Lens.</li>
<li>Adobe Lightroom CC.</li>
</ul>
CSS
Navigation:
#page-navigation ul, li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
Equipment:
#equipment li, ul
{
font-weight: 400;
font-size: 1.1em;
line-height: 1.3em;
margin-top: 0.1em;
margin-bottom: 0.5em;
}
Whatever I style in the navigation, it goes into the equipment too and vice versa. I thought the idea of having an id means it will only style that id, not every li
or ul
it finds.
Upvotes: 1
Views: 2360
Reputation: 41
If you want to style the first li in your list write:
#page-navigation > li {
font-weight: 400;
font-size: 1.1em;
line-height: 1.3em;
margin-top: 0.1em;
margin-bottom: 0.5em;
}
For the second li:
#page-navigation li > li {
font-weight: 400;
font-size: 1.1em;
line-height: 1.3em;
margin-top: 0.1em;
margin-bottom: 0.5em;
}
To style the ul:
#page-navigation ul {
font-weight: 400;
font-size: 1.1em;
line-height: 1.3em;
margin-top: 0.1em;
margin-bottom: 0.5em;
}
Upvotes: 0
Reputation: 384
I'm on mobile right now but your selectors are wrong. '#page-navigation ul, li' selects page-navigation -> ul AND every Li tag. Just remove the comma and you are good to go.
Upvotes: 0
Reputation: 208040
You need to understand what the comma is doing in your selectors. It separates the elements to select, so #page-navigation ul, li
means apply the following rules to any ul
element that is a descandant of the element with the ID of #page-navigation
AND also apply them to ALL li
elements on the page.
The same goes for your #equipment li, ul
selector. That means, apply the follow rules to all li
elements that are descendants of the element with the ID of #equipment
AND all ul
elements on the page.
What you probably want are #page-navigation ul li
and #equipment li
.
Upvotes: 0
Reputation: 36458
This:
#page-navigation ul, li {}
Should be read as:
#page-navigation ul,
li {
}
You're asking to style any ul
under #page-navigation
, and any li
on the page.
If you want to limit yourself to li
tags under #page-navigation
, you'd say:
#page-navigation ul,
#page-navigation li {
}
If you only want the top level of each to be styled, say so:
#page-navigation > ul,
#page-navigation > ul > li {
}
Upvotes: 3