Question

I’m more of a server side person, so for the css sample below, I understand what the first 2 groups of css selectors are doing.

I don’t understand the 3rd.

Given that the home class only occurs once in the html, it seems redundant to specify the class twice. This comes from the site clearleft.com. What is the purpose of the last group of selectors?

Thanks in advance.

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

#nav li.home a,
#nav li.home a:link,
#nav li.home a:visited {
    background-position: 0 0;
}

#nav li.home a:hover,
#nav li.home a:focus,
#nav li.home a:active {
    background-position: 0 -119px;
}

.home #nav li.home a,
.home #nav li.home a:link,
.home #nav li.home a:visited,
.home #nav li.home a:hover, 
.home #nav li.home a:focus,
.home #nav li.home a:active {
    background-position: 0 -238px;
}

Answer 1

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.