Does Each DIV Need To Be Unique?

Hi,

Does each DIV on page need to be unique?

This question is a little unclear, but divs are all the same, until you add ids or classes to them. ids must be unique, whereas classes can be re-used as they’re a 'class’ifying a common grouping.
Got anymore information? Hope this helped.

Well you can have 2 div’s with the same name provided one is an “div id” and the other is a “div class”.

But you can’t have the same name for two “divs” or “classes”.

As PicNet pointed out clearly, you can use a class as many times as you like (though don’t do it too much :slight_smile: ).

@justlukeyou—as pointed out, the question is too vague. You need to be more specific. A div is just a generic container useful for styling.

Thamks,

I have this is as an example. I am using “homesocialtopcell” twice. Should I only use once an rename the second one or do something different?

<div id="homesocialtopcell">
<div id="homesocialtoptwitter">
<a href="https://www" target="_blank" rel="nofollow" >
<img src="images/twitterlink.png" alt="Twitter Social"/>
</a>
</div>
<div id="homesocialtopfacebook">
<a href="http://www." target="_blank" rel="nofollow" >
<img src="images/facebooklink.png" alt="Facebook Social"/></a>
</div>
</div>
<div id="homesocialtopcell">
Text</div>
</div>

Not just “should” but “must”. You are only allowed to use an ID name once per page. Repeating ID names is not allowed. Unless you’re using it as an internal anchor or a Javascript hook, you’re possibly better off changing it from ID to class, rather than changing the name for the second one and then redefining everything in the CSS.

Hi,

Could I number the DIVs <div id=“homesocialtopcell1”>& <div id=“homesocialtopcell2”> etc

How does that compare redifining everything in the CSS. That sounds alot more complicated and alot more work tbh

If you give them different IDs then you have to define all the styling on both of them in the CSS. Why do you need to use IDs rather than classes?

The answer is ‘NO’. DIVs are just a generic block element and have no requirement as such. It depends on your styling intentions.

In fact for efficient CSS you should look for commonalities.

To clarify, if you want to style ALL DIVs so that their BG is pink you can do this:
div{background: pink;}

Now if you wanted only certain divs to have a pink background you can do this by a dding a class:
.pinky{background: pink;}
<div class=“pink”></div>

if you INTEND for only one THAT SPECIFIC div to be UNIQUE then you can target it by giving it an ID, as such

#pinky{background: pink;}
<div id=“pink”></div>

Again, your layout and styling intentions will determine how you will want to target and address each div.

Hope that helps.

Thanks,

Im not totally sure I understand this. If I want to make a DIV background Pink I can do this easily. However If I can only use a DIV once how can I look for commonalities.

What is the difference between a DIV and Class.

Should I turn the 2 homesocialtopcell into classes?

You can use multiple DIV they are just standard HTML elements like many other tags such as a paragraph “P” element, with no special identification with regards to applying CSS. A plain DIV is just as a DIV (clones). However, a DIV with an associated class attribute and name value differs since it has the attribute ‘class’ which you can specifically target with CSS.

Albeit each ID attribute acts as a UNIQUE IDENTIFIER and each value acts like a serial number so you cannot have two ID within a HTML document called: id=“dog” and id=“dog”. But you may have one called: “dog” and another one called “cat”.

With “Class” values you can have MULTIPLE occurrences; so you could have: class=“donkey”, class=“donkey”, class=“donkey” infinitum.

If you want both those two “homesocialtopcell” to appear ‘pink’ or whatever then yes you’d “sensibly” have to change the ID to Class (due to HTML rules on ID naming, i.e. no value duplication). The CSS will then apply the SAME style rules to ALL occurrences of the ‘class’, “homesocialtopcell” so theoretically every time you had that specific ‘class’ name match “homesocialtopcell” you’d get pink applied.

Brilliant thanks, so in the instances where I have multiple DIVS do I just change the # to a .

On both the HTML page and the CSS page or is their anything else I need to do?

[font=verdana]Asking the difference between a div and a class is like asking the difference between a car and blue … they aren’t even the same type of thing. Pretty much every time you’ve asked about a div, what you should be asking about is an ID.

A <div> is an HTML element, and is a generic container for text, images and other elements, used to group them together or as a hook for styles and scripts where there’s nothing more specific that would be suitable (eg a paragraph or heading).

IDs and classes are used to apply styling or scripts to <div>s and other elements.

The following discussions and articles may be helpful…

http://www.tizag.com/cssT/cssid.php
http://css-tricks.com/the-difference-between-id-and-class/

…but in a nutshell, for styling purposes, IDs and classes are used in similar ways, but there are a few key differences.

[list][]An ID can only be used once on a page, a class can be used again and again. So if you want to apply the same styling to multiple items, you’ll need to use a class.[]An ID is more specific than a class, so if you have conflicting style rules (where two rules giving contradictory styles apply to the same element) then a rule that uses an ID will usually outrank a rule that just uses classes.
[]You can only apply one ID to an element, but you can apply multiple classes to an element (even if you’ve given it an ID as well), so you could have <div id="section1" class="article box">, where ‘article’ and ‘box’ are separate classes.
[
]You can use an ID for an internal link (eg <a href=“#section1”> jumps to the item with id=“section1”.
[*]If you’re using it as a Javascript hook, getElementByID is better supported than getElementByClass, so you should use an ID.[/list]

So if you’re not using the last couple of points there, then yes I would recommend changing homesocialtopcell to a class.[/font]

The best way I found to get my head around classes and id is to think about objects.

For example, imagine a chair. When you think about chairs, there are many different types of chairs. There are swivel chairs, high chairs, reclining chairs, stools, sofas. Even though they’re all different, you still classify them all as ‘chairs’.

So in this case, ‘chair’ would be the class. It’s common attribute would be the fact that it’s something you use to sit in. It’s unique attributes would be it’s colour, shape, size etc. These would be in the ‘id’.

With this in mind, only turn both ‘homesocialtopcell’ divs into classes if they share the same attributes (eg, height, width, color etc). If they don’t, make them unique ids - ‘homesocialtopcell1’ & ‘homesocialtopcell2’.

On the HTML page, you can have

<div class=“something”></div>

repeated as many times as you like, but this

<div id=“anotherthing”></div>

should only be used once. It doesn’t affect your style sheet at all, because in there, you would just have styles set for

.something { … }

and

#anotherthing { … }

You need to understand div. You can use as many divs in a single page as you want. but their are some rules to follow. Decompose the whole webpage in seperate sections e.g. header, footer, sidebar, navigation and footer.
you should write some rules in css to make them unique on a page and apply id attribute on these elements. ID selectors should be unique and used on page only one time. For example to make the Header and Footer unique in one page, you should apply the id selector. I am sure are you not going to make a web page with 2 headers or 2 footers…lolz.

so you can compose your page like this in css
#Header {…}
#Container {…}
#Footer {…}
and use in html like this:

<div id=“Header”></div>
<div id=“Container”></div>
<div id=“Footer”></div>

for class selector, CSS classes are a block of CSS rules and you can apply them many time on a single page. For example you have 2 classes.

.smallText {… }
.bigText {… }

now you can use them in html like this:
<p class=“smallText”></p>
<p class=“bigText”></p>
<p class=“smallText”></p>
<p class=“smallText”></p>
<p class=“smallText”></p>

hope this will help you to understand the basics of html/css :slight_smile: