Id attribute

can we give two different tags the same id !!?

Hello! You can, but it won’t do anything. Consider this code:

<p id="id1">This paragraph will be red</p>
<p id="id1">Will this paragraph will be red?</p>

css:

#id1 {
color: red;
}

The first paragraph will be red, but the second won’t be.

So short answer: it won’t throw an error, but neither will it affect the second tag. In practise, it is also considered to be very bad as well. If you want more than one tag to be grouped together, use a class.

I hope this helps!

3 Likes

In this example, did you mean to declare #id1 instead of #a? Also, you mentioned that this rule will only affect the first <p> tag. Is that because id is expecting to be used in only one case (by convention)?

Oops, yes I did, sorry.

Yes, and there is also something about the way id attributes work, meaning they only affect the first tag which is assigned to them.

1 Like

very helpful ,thank you

1 Like

Usually, you would not put two id attributes with the same value into your code. Only the first id attribute would take effect.

You would use the class attribute as shown here:

HTML:

<p class="class1">This is class 1.</p>
<p class="class1">This is also class 1. We will both be affected by CSS!</p>
<p id="id1">This is id 1. I will be affected by CSS since I'm the first tag with an id of "id1"!</p>
<p id="id1">This is also id1. I won't be affected by CSS because I'm the second and not first tag with an id of "id1."

CSS:

.class1 {
color: blue;
}

#id1 {
color: red;
}

Hope this helps @meralimohamedali0742!