ansaurus

Question

CSS Class Selectors

Answer 1

A:

I don't think it's redundant, its simply wrong. Maybe the result of some css cleanup that ended up lost in the code, or something?

From your html code, the #nav object never appears inside an object of class .home, so the third CSS statement won't match anything.

Eduardo Scoz 2009-06-09 03:07:39

Answer 2

+1 A:

The last set will only match 'a' element that is a child of a home class element, child of the nav id element home of a li element with home class.

Why would you need it:

1) There could be another rule's selector that overrides the #nav li.home a rule in certain cases. Eg

.home #nav li.home a  
vs
.interior #nav li.home a

2) You could also have another selector that is less descriminating. Eg

#nav li a

Above assumes that there is other html (perhaps on other pages) that all use the same css file.

Edit -- Another thought: Since the background positions of the three sets of selectors is different, my guess that they're handling the #nav cases in three different page styles. And the selectors are needed so the rules only work on the appropriate pages.

Larry K 2009-06-09 03:08:21

Isn't your #1 wrong? .home appears inside #nav in the html code in the question, not the other way around..

Eduardo Scoz 2009-06-09 03:10:26

I agree with you about the html code you're showing. If the html shown is the only time #nav is used in any page. It could also be that the pages are being dynamically generated and sometimes the nav element is in a different context. And it could also be css cruft from prior versions of the site. Main thing to note (as you know) is that a class can appear multiple times in html. But ids need to be unique per page (but not per site).

Larry K 2009-06-09 03:14:28

Answer 3

+2 A:

.home #nav li.home a

It stands for: The anchor within the list-item which is of class home within the nav id, which is again inside of class home. I think the CSS is wrong.

Alan Haggai Alavi 2009-06-09 03:11:03

Or somewhere in the code it has the second combiunation, any way +1 for the wrong.

Itay Moav 2009-06-09 03:15:19

your explanation is wrong there. The #nav element is *within* an element of class home, it doesn't *have* that class.

nickf 2009-06-09 04:02:47

Thank you, nickf. I have: s/again of/again inside of/ in my post. You are right.

Alan Haggai Alavi 2009-06-09 04:04:36

Answer 4

+1 A:

If you set <body class="home"> or <div class="home"> as a parent container of the menu, you can control the look of the menu on that page or in that div.

<div class="home">
  <ol id="nav">
     <li class="home">
           <a href="/">Home</a>
     </li>
  </ol>
</div>

I was thinking that it could be applied to cascading style submenu's; eg

<ol id="nav">
  <li class="home">
        <a href="/">Home</a>
        <ul id="nav">
           <li><a href="#">SubNav</a></li>
        </ul>
  </li>
</ol>

Though that doesn't quite make sense, more becuase id #nav is used twice, when id's can only be used once per document.

garrow 2009-06-09 03:12:10

Answer 5

+1 A:

This group of selectors would select

links (<a> elements) in any of the states: visited, hover, focus,.....
where (1) is a descendant element of an li element with class=home
where (2) is a descendant element of an an element with id=nav
where (3) is a descendant element of an an element with class=home

Your sample HTML contains no elements that match these conditions, so nothing will be selected.

Don 2009-06-09 03:20:04

Answer 6

A:

Most of you are right, I didn't post the complete html. I figured out the reason. There is a parent div tag with the home class name. It's used to highlight the selected menu item for a given page. Sorry for the confusion, but the responses did lead me to check pages other than the one I was using, which lead me to the answer.

Thanks all.

Steve 2009-06-09 03:43:17

Answer 7

+1 A:

I do this all the time in order to highlight the current page in the menu without adding a class of 'current'. This comes in useful if you e.g. use a php include for the menu. clearleft's navigation looks like this

<ol id="nav">
   <li class="home"><a href="/">Home</a></li>
   <li class="who-we-are"><a href="/is/">Who we are</a></li>
   <li class="what-we-do"><a href="/does/">What we do</a></li>
   <li class="stuff-we-made"><a href="/made/">Stuff we made</a></li>
   <li class="work-with-us"><a href="/canhelp/">Work with us</a></li>
</ol>

And the body for the different pages looks like this

<body id="index" class="home">
<body id="index" class="who-we-are">
<body id="index" class="what-we-do">
etc.

Note - just saw you posted an answer to yourself while I was writing, but I'll still include this.

Eystein 2009-06-09 03:47:40

ansaurus

tags:

views:

answers:

CSS Class Selectors

related questions