CODEWITHSUNDEEP
css
Chris
Chris

Reputation: 19

CSS nested elements ignored by Chrome/Firefox?

This might be painfully easy, so my apologies in advance, but I'm on Hour 5 trying to figure this mess out. Here's the UL I'm trying to present as a horizontal bar:

<div id="navbarwrapper">
  <ul id="navbar">
    <li><a href="works.html">Search</a></li>
    <li><a href="works.html">Tips</a></li>
    <li><a href="works.html">Neighborhoods</a></li>
    <li><a href="works.html">Relocation</a></li>
  </ul>
</div>

And here's the strange CSS that seems to malfunction:

#navbar {}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li {display: inline;}
#navbar ul li a {text-decoration:line-through;}

The problem I'm having is that with this markup, the text wrapped in anchor tags in the HTML aren't receiving line-through (I'm using line-through as a placeholder because it's obvious when it's working or not; I don't actually want a line-through in the end).

Here's the strange bit. If I replace the "#navbar ul li a" nest with the following, it works:

#navbar li a {text-decoration:line-through;}

Furthermore, if I change "#navbar li{display: inline;}" with the following, I lose the inline property:

#navbar ul li{display:inline;}

Is it because I'm duplicating with "#navbar" and "ul"? It seems entirely too strange to me, and I feel as though I've been able to use this syntax in the past without error.

Thanks for the help in advance.

Upvotes: 1

Views: 1366

Answers (4)

Paul
Paul

Reputation: 9012

Your <ul> has the ID #navbar, so with #navbar ul you are actually addressing an additional ul inside your ul.

Try

ul#navbar li a {text-decoration:line-through;}

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

Your selectors are not correct.

#navbar is the UL element itself, so the selector #navbar ul does not target anything.

The correct selectors are

#navbar {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#navbar li { display: inline; }
#navbar li a { text-decoration:line-through; }

Upvotes: 1

yatskevich
yatskevich

Reputation: 2093

Your ul already have id of navbar. That's why #navbar ul doesn't match anything.

ul#navbar will match.

Upvotes: 2

Bas Slagter
Bas Slagter

Reputation: 9929

#navbar ul is wrong...#navbar is the ul itself.

Upvotes: 1

Related Questions