Can I use the same id on several labels?

0

I want to use the same id in some tags that will be repeated many times on the page, this to edit the code without having to write as many css lines.

I want to know if it will give me errors or it is better to write css in the html tags.

caja que se repetirá <div id='caja'>--contenido--</div><style>#caja{background="#ff0000;"}</style>

or if you give errors by programming this way

<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
    
asked by code2018 15.11.2018 в 06:16
source

4 answers

2

The idea is that id is unique at the page level, if multiple elements share id the HTML is not valid according to specification. On the other hand, browsers are usually quite tolerant of errors in HTML and ignore repeated id .

If you want to do it to share the CSS then the correct way is to assign the same class to the elements:

<div class="caja">...</div>
<div class="caja">...</div>
<div class="caja">...</div>

And in the CSS:

.caja {
    ....
}

Notice that you changed # by . , with this you select by class instead of id

    
answered by 15.11.2018 в 07:02
2

The specification is very clear and convincing with respect to id :

  

... the id attribute value must be unique among all the IDs in the   element's tree

  

the value of the attribute id must be unique among all the IDs in the   tree of elements

Although there are no visible errors in the document, there are errors at the level of validation or operation of the code. We can talk about implicit errors in that sense.

Therefore:

  • I do not recommend using repeated ids. Imagine a world where the same identity number is given to several people, same registration to vehicles, the same number to several people, the same bank account number ...
  • I would not recommend you to put style code directly to the elements, like here for example: <a style="background: #ff0000; color: #fff; padding: 10px;">hola</a> It's a bad practice . Why? For many reasons. Imagine an application with hundreds or thousands of pages with styles applied directly to the elements. And suddenly the owner of the page or application seems to change the colors, put some more chords to the season of autumn or summer. I already see you digging through the hundreds or thousands of pages to change to the new color. As some have commented, it is much better to use classes and apply the styles in the classes. So, if you have to change something, you change it in one place, not in a thousand places.

Example of bad practice

Suppose you have this and one day the boss tells you that the backgrounds look prettier in blue ... OMG, how do you plan to change now, you who thought that red was eternal?

<p>En la página o archivo 1 de tu aplicación:</p>
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
<p>En la página o archivo 506 de tu aplicación:</p>
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>
<p>En la página o archivo 99999 de tu aplicación:</p>
<a style="background: #ff0000; color: #fff; padding: 10px;">hola</a>

Example of good practice

Suppose you have this and one day the boss tells you that the backgrounds look prettier in blue and that you want the larger font ... And that you will receive a juicy incentive if you do it before noon:)

.by-temps {
  background: #ff0000;
  color: #fff;
  padding: 10px;
}
<p>En la página o archivo 1 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 506 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 99999 de tu aplicación:</p>
<a class="by-temps">hola</a>

Let's go for the incentive, it's 11:58!

.by-temps {
  background: blue;
  color: #fff;
  padding: 10px;
  font-size: 30px;
}
<p>En la página o archivo 1 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 506 de tu aplicación:</p>
<a class="by-temps">hola</a>
<p>En la página o archivo 99999 de tu aplicación:</p>
<a class="by-temps">hola</a>

CONCLUSION

  • id unique always
  • group by class when required
  • apply styles apart always
answered by 15.11.2018 в 12:17
0

The answer is YES , if you can, since the css will search all tags with the same id to apply the css, although this option is not recommended , it is a bad idea and a bad practice, besides that you will have several problems when using said id in javascript .

If you need to alter several tags at the same time, you must use the class property, which is more common and of good practice, besides you now work a lot when you work with javascript.

I'll give you an example so you can see the functionality of both properties.

$("#cambcolorid").click(function(){
$("#unico").css({"color":'#1B5E20'});
});
$("#cambcolorclass").click(function(){
$(".repetido").css({"color":'#BF360C'});
});
.repetido{
   font-size:25px;
   color:#abcdef;
}
#unico{
   font-size:35px;
   color:#EEFF41;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="unico"> esto es un texto con id unico</div>

<div class="repetido">
 este texto pertence a una clase
</div>
<div id="unico"> esto es un texto con id unico</div>
<div class="repetido">
 este texto pertence a una clase
</div>
<div id="unico"> esto es un texto con id unico</div>
<div class="repetido">
 este texto pertence a una clase
</div>

<button type="button" id="cambcolorid">cambiar color ID</button>

<button type="button" id="cambcolorclass">cambiar color class</button>
</body>
</html>
    
answered by 15.11.2018 в 07:08
0
  

Can I use the same id on several labels?

Yes, but it is not advisable because of the confusion that may exist when working with CSS or JS and try to catch the element by id , if you think you will need 2 or more id then you should look for another valid selector like for example the recommended class what in CSS and JS is found as . instead of # as id .

    
answered by 15.11.2018 в 08:51