CODEWITHSUNDEEP
htmlcss
user5292845
user5292845

Reputation:

How to style just one of multiple unordered lists?

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

Answers (4)

Rory Saxby
Rory Saxby

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

Cynigo
Cynigo

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

j08691
j08691

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

Paul Roub
Paul Roub

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

Related Questions