Menu
This is a beginner's question, but I need to clarify it. Yes according to most of the tutorials it cannot be applied more than once.
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Reference
http://css-tricks.com/the-difference-between-id-and-class/
But I wrote a simple mark-up in HTML and applied some CSS.
Here is my code
HTML
<!DOCTYPE html>
<html>
<head>
<title>ID vs Classes</title>
<link rel="stylesheet" type="text/css" href="ID & Classes.css">
</head>
<body>
<h1 id="forh1">This is a h1 header</h1>
<p>Lorem ipsum dolor sit amet</p>
<h1 id="forh1">This is a h1 header</h1>
<p>Curabitur sodales ligula</p>
<h2 id="forh1">This is a h2 header</h2>
</body>
</html>
CSS
#forh1{
text-align:center;
}
I have applied the same ID more than once (3 times). Two times in h1 header and one time in h2 header. When I run it in browser (chrome & firefox) they worked perfectly. All text in h1 and h2 headers were aligned center. Why is that ? Have not I grasped ID concept properly or is it an issue with the browser? Because I have heard modern browsers are smart enough to understand most of the implicit things. Please help.
382
The major difference is that IDs can only be applied once per page, while classes can be used as many times on a page as needed. “ if you want to apply same css to multiple html elements, use class. just define a class in css, write all stylings and then give that class to all elements you want to style same.
IDs must be unique - the same ID should not be used more than once in the same page. Otherwise, they can interfere with the user agent's (e.g. web browser, assistive technology, search engine) ability to properly parse and interpret the page.
You can have as many ids as you want on a page but you can only use a specific id once. For example; id="logo" can only be used once on a page. You could also use id="gallery" on the same page but it can be used only once on that page. On the other hand class="someClass" could be used multiple times on a page.
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"href="IDs_Classes.css".
Here's a good read, on why not to do that (So won't repeat here)
148
You can use ids more than once. The browser will still apply the styles. It is, however, not best practice to do so and is classed as invalid markup.
To get around it you can add a class to the element. Classes can be used on as many elements as you want.
Check the W3C validator and it throws the error duplicate ids
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
