Difference between ID and Class
First of all, w3schools is a terrible resource. It is badly written, cluttered, unfocused, and frequently misleading. You should use this much better set of resources at the Mozilla Developer Network instead (it sets out to achieve the same thing).
Your example doesn't use classes at all. You have CSS invoking an ID, and 2 HTML elements with that ID (which you shouldn't do — IDs are supposed to be unique!). The key difference between the 2:
- IDs reference unique elements. There should only be 1 instance of any 1 ID. Classes can be applied to many elements and an element can have multiple
class
es - A CSS rule using an ID will override a CSS rule with a class if they both try to assign the same properties.
- IDs are used for all sorts of native applications: anchor references, forms, iframes, whereas classes are used purely for styling with CSS.
I modified your code as an example of these points. Here's some of that code using classes for reference:
.paragraph {
font-style: italic;
color: green;
}
And the HTML:
<p id="para1" class="paragraph">Blah blah blah</p>
What's the difference between an id and a class?
ids
must be unique where as class
can be applied to many things. In CSS, id
s look like #elementID
and class
elements look like .someClass
In general, use id
whenever you want to refer to a specific element and class
when you have a number of things that are all alike. For instance, common id
elements are things like header
, footer
, sidebar
. Common class
elements are things like highlight
or external-link
.
It's a good idea to read up on the cascade and understand the precedence assigned to various selectors: http://www.w3.org/TR/CSS2/cascade.html
The most basic precedence you should understand, however, is that id
selectors take precedence over class
selectors. If you had this:
<p id="intro" class="foo">Hello!</p>
and:
#intro { color: red }
.foo { color: blue }
The text would be red because the id
selector takes precedence over the class
selector.
Difference between id and class
The biggest difference is that a document can have multiple elements with the same class, but not with the same ID. An Identifier must be specific to a certain element within a document (i.e. full HTML page).
When applying CSS styling, some experts have recommended using classes over IDs to avoid specificity wars. CSS Lint (http://csslint.net/) recommends this.
The reason is that stylesheets are read from top to bottom, but IDs take precedence over class. This means that:
#stockexchange-id {
color: blue;
}
.stockexchange-class {
color: red;
}
Would color the text blue, even though red comes later. Here's a good graphic explaining specificity: https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg.
If everything has the same specificity, and most styles are applied via a single class, it makes the CSS easier to reason about, since it will read from top to bottom without extra styles being mixed in different orders. It also makes it easier to override classes, which can be useful.
Finally, if you style based on classes, you can re-use the styling on the same page by applying the class to another element on the page. With IDs, since they are unique, you cannot do this. Even if you think an element is unique on a page (e.g. a Buy Button), this may not always be the case. A designer may request the same element again later in the page.
What is the difference between id and class in CSS, and when should I use them?
For more info on this click here.
Example
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
(Note that CSS uses the prefix # for IDs and . for Classes.)
However color
was an HTML 4.01 <font>
tag attribute deprecated in HTML 5.
In CSS there is no "font-color", the style is color
so the above should read:
Example
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
The text would be white.
What's the difference between class and id in jQuery?
ID's should be unique on the page, when you have multiple elements with same ID's, jQuery selects only the first one. That's because it doesn't have to bother looking for others as there isn't supposed to be any more – that might explain the weird behaviour you're experiencing.
If you want multiple elements to have the same functionality, give them the same class. If you want to identify a specific element, give it an id. This isn't limited to just jQuery, but to HTML and CSS overall.
When to use id and class in html/css
ID and CLASS, both can be used for same purpose but its not a good practice for web designing.
ID is used to uniquely identify any element.
But class is used to identify a group of same type of elements.
Hope it is clear now.
Best of luck
How to choose between `class` and `id`
Use id
to identify elements that there will only be a single instance of on a page. For instance, if you have a single navigation bar that you are placing in a specific location, use id="navigation"
.
Use class
to group elements that all behave a certain way. For instance, if you want your company name to appear in bold in body text, you might use <span class='company'>
.
Related Topics
How to Change Primefaces Submenu Default Icons
How to Compile an Existing Project Because Compass Can't Find It
Why Is This 11 Class Selector Less Specific Than the Id
Css: Element Has 'Display: Block' and Doesn't Start a New Line
Laravel 5.3 - Issue Displaying Images from Public Folder Using @Extends & @Sections
Font and Line Spacing in Different Browsers
Font Weight with Google Fonts Roboto, Normal (400) and Bold (700) Work, Light (300) Does Not
Dynamic Styles for Gwt Celltable Cells
Why Position Sticky Is Not Working If Followed by Position Absolute Element
Css: How to Adjust My Font Size Fill All the Space in a Justified Layout
The Old Center a Image in a Div Issue ( Image Size Variable - Div Size Fixed )
Css- Multiple Background Image