Can a div Have Two ids?
Can a div have two ids? While you can give a div multiple ids, only one will be applied by the browser. The second id or any other id after the first one will just be ignored by the browser. So having multiple ids for a div is not only pointless but is also incorrect HTML. If you need multiple tags for an HTML element, just use the class attribute. You can have as many classes as you want.
The best way to show whether a div can have two ids is to test it. So let’s show some examples of what happens when we give a div multiple ids.
In this first example, we will have a div with two id tags. Each id with have specific styles associated with it, so we can tell if the id is being applied to the div.
The first id, which we will call, #first, will have a background color of light green. The second div, which we will call #second, will have text that is bold. Let’s see what happens.
If you inspect the HTML in your browser you will notice that the HTML for our div appear as so:
Let’s see what happens if we swap our ids.
As you can see, the styles of the first id, this time #second, are being applied on the div.
JavaScript and Divs with multiple ids
So the main takeaway is that any other ids placed after the first id, will not show up in the HTML. So this means if we try to target the div using JavaScript, we can only target that first id and not any others. Let’s take a quick look at this.
We will have the same HTML code, just apply new styles via JavaScript.
#third < background: #7bbfa2; >#fourth As you can see, only the first line of JavaScript is executed, because the id, #fourth does not exist in the HTML.
Let’s swap the ids to see what happens.
#third < background: #7bbfa2; >#fourth Can multiple divs have the same id?
Finally, we will just see what happens when we have multiple divs with the same id. Once again, an id is supposed to be unique to an element. However, we will find that when we apply the same id to multiple divs, the id will be rendered and applied to all divs in the HTML.
Lets take a look at this below:
And here is what will be displayed by the browser:
This is not great practice however and to show one problem with this, let’s say we want to change the styles of our divs using JavaScript.
document.getElementById("sixth").style.background = "white";
This code will change the background color to white of the div with id #sixth. So let’s see the results when we use this code and have multiple divs with the same id.
As you can see, the JavaScript code will only be applied to the first element it finds with the matching id.
Hopefully this article has been useful in helping you answer the question, can a div have two ids?
Other Articles You’ll Also Like:
- 1. How to Call a JavaScript Function From HTML
- 2. What is the Correct HTML for Adding a Background Color to a Div?
- 3. How to Give a Textarea a Max Length
- 4. What is the Correct HTML for Inserting a Background Image?
- 5. What is the Correct HTML for Making a Drop-Down List?
- 6. outerHTML – How to Get and Change the outerHTML Property of an Element
- 7. How to Filter a List of Divs with a Text Input Bar Using Javascript
- 8. Making a Checkbox Disabled in HTML
- 9. How to Make a Div Scrollable in HTML
- 10. What is the Correct HTML for Making a Text Input Field?
About The Programming Expert
The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.
Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.
At the end of the day, we want to be able to just push a button and let the code do it’s magic.
You can read more about us on our about page.
Multiple Class / ID and Class Selectors
They look nearly identical, but the top one has no space between #header and .callout while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it’s actually a quite useful selector. Let’s see the difference, what that top selector means, and exploring more of that style selector. Here is the “plain English” of #header .callout :
Select all elements with the class name callout that are decendents of the element with an ID of header.
Maybe this graphic will make that more clear:
Combinations of Classes and IDs
The big point here is that you can target elements that have combinations of class es and ID s by stringing those selectors together without spaces.
Target an element that has all of multiple class es. Shown below with two class es, but not limited to two.
We aren’t limited to only two here, we can combine as many class es and ID s into a single selector as we want.
Although bear in mind that’s getting a little ridiculous. Learn more about how to select IDs, classes, and multiple classes at DigitalOcean.
So how useful is all this really? Especially with ID s, they are supposed to be unique anyway, so why would you need to combine it with a class ? I admit the use cases for the ID versions are slimmer, but there are certainly uses. One of those is overriding styles easily.
Or perhaps prefacing the selector with something even more specific. More useful is multiple class es and using them in the “object oriented” CSS style that is all the rage lately. Let’s say you had a bunch of div s on a page, and you used multiple various descriptive class names on them:
They all share the class “box”, which perhaps sets a width or a background texture, something that all of them have in common. Then some of them have color names as class es, this would be for controlling the colors used inside the box. Perhaps green means the box has a greenish background and light green text. A few of them have a class name of “border”, presumably these would have a border on them while the rest would not. So let’s set something up:
.box < width: 100px; float: left; margin: 0 10px 10px 0; >.red < color: red; background: pink; >.blue < color: blue; background: light-blue; >.green < color: green; background: light-green; >.border
Cool, we have a good toolbox going here, where we can create new boxes and we have a variety of options, we can pick a color and if it has a border or not just by applying some fairly semantic class es. Having this class name “toolbox” also allows us to target unique combinations of these class es. For example, maybe that black border isn’t working on the red boxes, let’s fix that:
Based on this demo page.
Also important to note here is that the specificity values of selectors like this will carry the same weight as if they were separate. This is what gives these the overriding power like the example above. Learn more about specificity in CSS at DigitalOcean.
All good current browsers support this as well as IE back to version 7. IE 6 is rather weird. It selects based on the last selector in the list. So “ .red.border ” will select based on just “ .border “, which kinda ruins things. But if you are supporting IE 6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.
