CODEWITHSUNDEEP
htmlcss
williamsongibson
williamsongibson

Reputation: 277

Do IDs always have to relate to one element in CSS? What if that element is repeated on the page?

If I have a menu that is displayed at the top and bottom of a long HTML page and the DIV is setup with <div id="menu"><ul><li>Home</li><li>About</li></ul></div>

Can I just repeat this code at the bottom of the page? Or should the ID be a Class in this case?

I've read that ID should only be used once on the page.

Upvotes: 0

Views: 119

Answers (6)

user1535967
user1535967

Reputation: 177

You can certainly use the id="" attribute as many times as you need, but the contents of the attribute should be unique. Not having a unique value is a HTML error.

Upvotes: 0

Quentin
Quentin

Reputation: 943561

Do IDs always have to relate to one element in CSS?

One element per page

What if that element is repeated on the page?

Then the HTML is invalid and you are depending on error recovery instead of expected behaviour.

If I have a menu that is displayed at the top and bottom of a long HTML page… Can I just repeat this code at the bottom of the page?

Not in an HTML document.

Or should the ID be a Class in this case?

Yes. A class a group of things that have something in common. An id identifies a particular thing. You have two menus that have something in common, use a class.

I've read that ID should only be used once on the page.

Correct

Upvotes: 0

Gaurav
Gaurav

Reputation: 341

We can not repeat Same ID in page... Better to use class for the same...:)

<div class="menu">
   <ul>
     <li>Home</li>
     <li>About</li>
   </ul>
</div>

Upvotes: 0

Jude Fisher
Jude Fisher

Reputation: 11294

Yes, an ID should only be used once. If you need both menus to pick up the same CSS settings, you can use <div class="menu"/> If many of their setting are the same, but some (such as the position) differ, you can use something like: <div id="top-menu" class="menu" /> and <div id="bottom-menu" class="menu" /> - this is quite a common usage, where the id controls the external position of an object on the page, which can often be unique, while a class controls its inner layout, which may be shared with other similar components.

W3 Schools has a good primer on class and id selectors: http://www.w3schools.com/css/css_id_class.asp

From their description:

The id Selector

The id selector is used to specify a style for a single, unique element.

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

Upvotes: 1

BenM
BenM

Reputation: 53198

IDs are designed to be exactly that - identifiers. You should have only one ID per document. If you need the same style applying to multiple elements, as you have correctly indicated, use a classname instead.

<div class="menu">
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</div>

Upvotes: 0

Kyle
Kyle

Reputation: 67194

An ID has to be unique within an element. This is what classes are for, if you need to reuse the ID name for whatever reason, change it to a class.

http://www.w3schools.com/tags/att_global_id.asp

<div class="menu"><ul><li>Home</li><li>About</li></ul></div>

Upvotes: 0

Related Questions