This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 8 years ago.
Ok, so I posted this up in this thread (Difference between div id and div class) but was instructed to post it up as an individual question. I get the answers in the previous thread but wanted more clarification on the subject.
I am fairly new to css, so the conversation over DIV and CLASS interests me. I have built a site using wordpress which has allowed multiple ID's. I am interested if there really is anything wrong with this? For example, this code displays four boxes in two columns, two rows within the container...
<div id="container">
<div id="sub_container"
</div>
<div id="sub_container"
</div>
<div id="sub_container"
</div>
<div id="sub_container"
</div>
If I have specific styling that is different to the WP theme, obviously then it can be applied to the div or the class?
So in the case above I might have
#sub_container {background: #ffffff; position: relative; float: left;}
So I want to figure is this OK? If not, what is the benefit of having the sub container as a class rather than a div? I get the 'unique' argument, but if this works fine, why not use it?
In my code I have used classes for some headings and sections where I want specific formatting that varies from the built in formatting, but that's about it..
..I figure I would use class if I wanted to apply different styles to the sub_container div? e.g. might want the second one to have red fonts, or have the boxes a different size on another page etc etc?
An id should be unique in the page. That's not just a rule that the standars tell us, it's the entire point of setting an identifier on an element.
You should use the id when it is an element that really only appears once in the page. If you have a page footer that would be a good use of an id, as you only have one footer. For any element that can appear more than once, a class is better used. This applies even if the element actually only appears once, it just goes along with the intention of the attributes.
"I get the 'unique' argument, but if this works fine, why not use it?"
There is two problems with this:
You don't know that it works fine in all current browsers, not to speak of all the browsers and browser versions coming in the fututre.
It dosn't work fine when you go beyond CSS. If you for example want to access the element using Javascript, you see that the id gets almost completely useless if you have duplicate id attributes in the page.
Id's should always be unique, having the same Id may "work" from a css point of view but two vehicles do not have the same registration number and two people do not have the same social security number.
ID = Identity.
If you want to apply the same style to multiple elements use the class instead
markup
<div id="container">
<div class="sub_container">
</div>
<div class="sub_container">
</div>
<div class="sub_container">
</div>
<div class="sub_container">
</div>
css
.sub_container {background: #ffffff; position: relative; float: left;}
Other developers will expect ids to be unique. This means that if you use what is expected to be a unique id when you should use a reusable class, you will at some point experience unexpected behavior when using 3rd party software.
For example, with jQuery you will find this behavior.
//jQuery selecting by id
$('#sub_container') //will find one of the elements with the sub_container id.
//jQuery selecting by class
$('.sub_container') //will find all elements with the sub_container class.
Related
I don't think it's the case but I'm still taking the shot: Is there such a thing as a non-hierarchical tag in HTML (for markup independent of content structure).
For instance, something like:
<div class="thingy" id="thing">
blabla<n-htag>bla
</div>
<div class="thingy" id="thing2">
John Dodelidoo</n-htag>
</div>
EDIT: I'm realizing now what you're asking is that you want a tag where you can group multiple tags together but being completely unrelated to the HTML structure (e.x. you could start it in the middle of one element and end it in the middle of another that is completely isolated). Because of the way XML is structured, you cannot; it is completely based on hierarchy (as far as I can tell).
For archival purposes, the original answer is below.
If I understand what you're asking, the closest thing we have to that (as far as I can remember) is <span>: while it doesn't change the visual appearance of the page, it allows you to group elements. (And obviously, while you aren't REQUIRED to indent it, you can).
I am trying to create a link that goes directly to a certain section of a different page. Here is what I'm doing.
I create an anchor point using the name attribute:
<a name="fish"></a>
<p>some content....</p>
I create a link with the # added to the end
"http://example.com#fish"
***note I have also tried the id method instead of name which still gives me the same issue.
example: <div id="fish"></div>
The functionality works fine and it takes me to the specific part on the page, the only issue is that it looks different on different browsers. What firefox displays is about 5 inches higher than what chrome displays.
It's probably because the a tag is taking up some space.
Easiest solution, use an id instead.
<p id="fish">some content....</p>
Make sure there's enough content below so it can scroll
Most browsers have the same css default value for common html elements, however it is possible that some elements have different attribute values for padding and margin.
One way to avoid these differences is explicitly applying the values in the css statements.
p {margin: 10px 0px}
If you do not want to do this, I recommend you put link exactly in the position where text is located.
<p><a name="fish"></a>some content....</p>
You can locate the link anywhere since the anchor element will not be visible in the viewport
I would like to have 2 different configurations of addthis on the same page.
Take note that I'm using the new Addthis, where the code looks like this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx" async="async"></script>
<div class="addthis addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
What I'm trying to do is have 1 that have the share numbers tooltips and the other doesn't
Is it possible?
Since AddThis creates HTML elements that contain the count 'tooltip' (it's not actually a tooltip) with a single class or ID element, if you want to be really specific (i.e. choose what to hide exactly where you have two or more AddThis instances on a page) you could:
add the instance where you want to hide the count inside a div with a CSS ID or unique class;
use display: none to hide the parent social media count element only inside that div.
Target the AddThis where you want to hide the count elements
Seems obvious, but For example, on this page if you inspect (e.g. in Chrome) the rendered Facebook and Twitter AddThis elements and add 'display: none' to the .pluginCountButton and .count-o styles that contain the elements you want to hide, as expected: they vanish from the display.
So if you nest your AddThis instances inside a uniquely-identified div (or any parent element) then you could simply target the one you want to hide like this:
#hiddencount .pluginCountButton,
#hiddencount .count-o {
display: none;
}
You'd need to locate the equivalent .pluginCountButton and .count-o elements for your version and instance—each social media icon has it's own so you'd have to identify each, as in the above example. You may also need more specificity between #hiddencount and the count container to get the style to apply.
NOTE: without a working example with the count links showing, this is untested. If you have a working example, I'd be happy to test it.
Through some digging I discovered the answer.
You need to add the class addthis_toolbox to your divs like so:
<div class="addthis addthis_toolbox addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
source: http://support.addthis.com/customer/portal/questions/5024966-multiple-share-button-on-same-page
I understand the concept of one id in an html page. As a noob, i was just wondering if you can use the same id once for different html pages. Will that be consider sloppy?
For instance, <div id="1"></div> (used only once)in index.html and used <div id="1"></div> again in product.html. Is that consider bad?
I tried to do a search but found no answers.
Thank you!
!edit! Thank you for the answer guys. Appreciated!
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.)
It's fine to do that, but you would want to name your ids something better than "1". Something more descriptive, like <div id="main-part"></div> would be better.
Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view)
Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)
In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup.
I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is this something I should handle with position or float property in CSS?
I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue?
The CSS code is in screenshot 2. After looking at a previous discussion here I thought using class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.
It can be handled by floating both elements left and removing all fixed widths. Here is the amended jsFiddle: http://jsfiddle.net/joshnh/jdUWt/