differing class behaviour

[gulliver]

A query on multiple instances of class="current" when applied to ul/li.

My site pages feature several navigation bars for primary(around the site) and secondary(within specific sections) navigation. They're coded as ul with appropriate css.

Within each navbar is a 'currently viewing' li for which the link is removed. It's tagged as class="current". The behaviour 'current' can differ between individual lists - on one list it may set text as bold; and normal weight on another.

Is the simplified example CSS and HTML below ok? Or will 'things get confused and display incorrectly'?

Example CSS

ul#mainnav li.current
{
font-size: 11px;
font-weight: bold;
color: #999;
}

ul#zonenav li.current
{
font-size: 10px;
font-weight: normal;
color: #666;
}

Example HTML
<ul id="mainnav">
<li class="current">one</li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul>

<ul id="zonenav">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li class="current">four</li>
<li><a href="#">five</a></li>
</ul>

[bradley317]

If you have to define the style twice within the css, why not produce two differant classes, e.g. current1 and current2

Is there any reason why you have to use the exact class name 'current'?

[gulliver]

If you have to define the style twice within the css, why not produce two different classes, e.g. current1 and current2

Is there any reason why you have to use the exact class name 'current'?

Damn fine point, sir.
It'll certainly help avoid 'which tie shall I wear today' browser confusion - and perhaps help me better understand my code when I have to go back to it months later and have forgotten stuff.

I like the 'simplicity' of "current" - and am perhaps thinking ahead in trying to avoid what could become a johnny4567893@h*tmail.com scenario. With a little creative thinking I'm sure I can get some appropriate names... class="currentzone" and class="currentsubzone".

So yeah. Thanks. Appreciated. And, if I name them individually, I guess it avoids even having to think about browser reliability.

[Xerxos]

Ehm, why produce different names classes? Just use divs IDs if u want to have different names.. if you want to have the same then use class... so simple and i dont get why you would use current for both - completely different uses and completely different definitions... go for the ID, but remember ID is unique (each name only once in document)

[Paul O'B]

Hi,

Your original version will work as the classes become dependent on the id before it. Just as if you define p.test then the class test only applies in paragraphs etc.

I quote often use an id on the body so that I can use the same styles on different pages but have them take different effect and still keep them all in the one stylesheet.

This is very useful for indicating the current page on a main navigation. Each page has an id in the body tag and each naviagation item has the class current. However the only one that gets the highlight is the one that matches the body id.#body .current {color:red}. All the rest of the links get the standard class etc.

Paul

[gulliver]

>why produce different names classes? Just use divs

It's late and I may be misunderstanding this... so's I could subsequently look at and better understand my code, I specifically name my lists rather than rely on them to behave according to the parent div.

And Paul - thanks again. Another detailed response which gives me exactly the info I needed.

[Paul O'B]

Hi,

Heres a couple of examples in case anyone wants to know:

If you want to have say a different colour theme on a page such as changing the header bg colour then you can use the same style but use the body id to target the page as required.

body#home #header{background:red;}
body#page1 #header{background:blue;}
body#page2 #header{background:green;}

On the home page the header will be red but on other pages they will be as described by the appropriate body id. This means the css stays constant and the only change to each page is to identify it with the body tag.

This is similar to what you were doing above but your usage would be in the same page and identified in a similar manner by the target id.

To highlight a navigation menu for the current page needs a little more thought and is slighlty different to what I previously mentioned so i better explain it properly (I just posted this in another thread so i'll just repeat it here for clarity.)

body#first a.page1 {background:red;}
body#second a.page2 {background:red;}
body#third a.page3 {background:red;}

<body id="first">
<!-- change the id on each page to either first, second or third -->
<ul id="menu">
 <li><a class="page1" href="#">Page 1</a></li>
 <li><a class="page2" href="#">Page 2</a></li>
 <li><a class="page3" href="#">Page 3</a></dli>
</ul>

That last bit drifted off topic but as I mentioned navigation in my first post I thought I better show an example

Paul

[Xerxos]

ehm, i am sorry... i ment use IDs.. i dont see the point of using the classes, if they have different purpose, they are only once in the document and so on...