Jump to content

Class less effective than ids?

Recommended Posts

I have a problem that frankly baffles me. I have two different divs for layout, each has its own id (#left and #subleft); within each div, there's a unordered list, again, with special ids; within the lis, I had links, and one of them was given id="current" and was highlighted to let the reader know where he is. This morning I sent the files to be validated. Besides a few errors like adding an extra (") to the syntax, everything seemed fine, until I realised I had used id="current" twice, one on div#left and another on div#subleft. Ok. The solution, as everyone knows, is to substitute id="current" with class="current" (I need two highlighted links to let the reader know where a subsection is located).The problem, to my surprise, was that, now the webpage validated, but the highlights disappeared. The original code was:

ul li a#current {background-color:something}

Then I switched to class:

ul li a.current {background-color:something}

And the highlights disappearI tried eliminating first ul (and leave li a.current), then li (and leave a.current), then adding ul again (ul a.current)... nothing... until: ul#side li a.current, that is, I typed a named ul and it works. But I want both links highlighted. Why is it that I must code with id'd uls? Shouldn't the second code above work as is?Thanks for any input you might have.Thanks!

Link to post
Share on other sites

The second code will work, but they refer to two different things. IDs work like this:

#stylename{  ...}<a id="stylename"></a>

Classes work like this:

.stylename{  ...}<a class="stylename"></a>

Theoretically, with an ID, you are only supposed to have one element on the page that has that ID. But in practice, most browsers will apply the style to all elements with that ID.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...