CSS Div Id Used Only Once Per Page

css div id used only once per page

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.

If you need multiple items to have the same attribute, then you can set them as a class.

More info is at the W3C - Element identifiers: the id and class attributes (the HTML 4.01 Specification).

You can only use an ID once, what exactly does that mean?

Ids must be unique within a document (like an entire HTML page). That's the hard and fast rule set forth by the W3C: once you use an ID in one place, you shouldn't use it again somewhere else within that document.

Why? Well, think about what would happen when you try to run something like document.getElementById('basket-button-inner') against your document.

What element would get returned? Here, javascript expects IDs to be unique, but they're not in your case. So, which element would that snippet select?

By violating the rule, you're going to cause strange and wonderful things to happen when you use built-ins and other functions that expect IDs to be unique.

Will your page display if you re-use that ID a bunch of times? Sure. Will elements with that duplicate ID be styled properly? You bet. Will your page break in strange and unusual (and hard-to-debug) ways, especially when you try to select one of those elements with javascript? Yep.

For styles that should be repeated among any number of elements, use classes. This is what they're for, and they can be used as many times on as many different elements as your document requires.

Think of it this way: classes define a single "classification" to which any number of elements can belong (in your case, it's basket-button-inner). That's what they have in common: they're all buttons that are members of that particular classification; they just happen to display on mobile and desktop. An ID is a unique thing to which one and only one element can belong. That's it. If you use an ID, you're saying "I expect there to be only one of these things because it's so unique I gave it an ID."

Generally speaking, you'll want to be reserved in giving things IDs. Things deserving of IDs include stuff that's really important, like an element you're going to refer to in a script; or an element from which you want to create a new styling context as IDs are very powerful, very specific selectors that are hard to override)

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

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.

can I apply IDs more than once in CSS?

ID's are meant to use for identifying elements uniquely, they will work as far as CSS goes, but when JavaScript comes into action, you will understand why not to do so.

CSS just selects the element, when you write a matching selector, it has nothing to do with valid or invalid HTML you write, the job of CSS is to apply styles as per the selector defined. For example

Demo INVALID HTML, DO NOT USE IT (only for demonstration purpose)

---

Hence, ID's should be unique,, use class if you want to use the same properties on multiple elements.

From W3C

This attribute assigns a name to an element. This name must be unique
in a document.

---

Side tip: Use _ instead of spaces href="ID & Classes.css" should be href="IDs_Classes.css".

Here's a good read, on why not to do that (So won't repeat here)

Can you use the same id once for multiple html page?

An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)

When to use div id or div classes through an entire website

ID's and classes are not just about uniqueness and duplications. There is something called Specificity in CSS, so if you read more on specificity, it will say that ID declarations have more specificity score than class rules, thus, it is recommended to use classes wherever you can in your CSS and leave ID's for JavaScript actions.

Also, lets be clear here, CSS has nothing to do with ID duplication nor does HTML. It's JavaScript where you will find issues if you duplicate the ID in your HTML(DOM). So technically you can use duplicate ID's as they are just identifiers for that element(though, HTML validation will yell out an error), but it does cause an issue when you start using those ID's in JavaScript. (Now am not saying that you should use duplicate ID's but just clarifying the basics.)

Talking more over specificity,

#something {
  color: red;
}

.something {
  color: green;
}

<div class="something" id="something">This will be red and not green</div>

So, the more you make use of ID's, the more specific your CSS gets and at certain stage, you need to write even more specific rules to override the previous ones thus creating more messy CSS.

---

Base rule, use tag selectors wherever you can, atleast to set defaults or resetting those elements, use classes over ID's, leave ID's if you want initiate a particular EVENT or ACTION via JavaScript, for example, a click event on a button. Using ID's in your HTML helps JavaScript process faster as it will stop looking for another element beyond your first matched element.

Change css classes for specified id only

If the ID and class belong to the same element, you need to remove the space between the two in the CSS.

If there is a space, the CSS will find all elements matching the first part of the selector, then look INSIDE those elements for elements matching the second part of the selector.

If there is no space, the CSS will find all elements that have the first part of the selector AND the second part of the selector (eg. matching ID and Class).

Take a look at the code below. Hope this helps.

/* Target all elements with the Class of 'c' that are inside elements with the ID of 'i' */#i .c {  background: red;}

/*Target all elements with the ID of 'i' AND the Class of 'c'*/
#i.c {  background: yellow;}

<div id='i'>  <div class='c'>    ID and Class on different divs. Space in CSS.  </div>  <div class='b'>    This is not targeted because class b was not selected in CSS  </div></div>
<div id='i' class='c'>  ID and Class on the same div. No space in CSS.</div>

Why do you use Class for multiple elements but ID for one?

Multiple ids violates html standards.

Modern browsers may forgive common violations such as these in an attempt to win popularity. :)

I recommend sticking to the standards over browser implementation of the standards wherever you can. The authors of the standard publish a service that will validate your html against a given html version.

http://validator.w3.org/

Trust that, rather than your browser.

Show a div only once per time the user is on the site

You could use localStorage instead, only when the user clears it out he will get the popup again (same with cookies) but its much simplier:

(function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
        document.getElementById("popupp").style.visibility = "visible";
        localStorage.setItem('visited', true);
    }
})();

html:

<div id="popupp" style="visibility:hidden;">hi</div>

This way you get a lot of less code. Hope this helps.

Does ID have to be unique in the whole page?

Yes, it must be unique.

HTML4:

https://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Section 7.5.2:

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

HTML5:

https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id

The id attribute specifies its element's unique identifier (ID). The
value must be unique amongst all the IDs in the element's home subtree
and must contain at least one character. The value must not contain
any space characters.

---

Related Topics