can I apply IDs more than once in CSS? [closed]

StackOverflow https://stackoverflow.com/questions/21495626

  •  05-10-2022
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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" should be href="IDs_Classes.css".

Here's a good read, on why not to do that (So won't repeat here)

OTHER TIPS

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

To answer your question: Yes, you can apply IDs more than once, as your test has proven.

HOWEVER!

Even though this works as expected in your test in modern browsers, you are not guaranteed for it work in older browsers, or IE for that manner. Neither are you guaranteed that javascript functions like getElementByID will work as intended. As others have answered: Multiple IDs in html is considered bad practice and a misuse of the concept of class & ids.

For Html and Css:-
In CSS code page,
Consider, you have created a style for a ID.
In Html Page,
You can apply the style of that ID many times as per your wish.

But, For Javascript and JQuery:-
If you use same ID to more than one field, then you cannot validate that field.
Because, ID must be unique to perform operations on Javascript and JQuery.

I hope you understand.

I suggest appying css to you tags first as it makes updating your pages much easier

h1 {

 text-align:center;

}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top