diferencias con <div id=""> con <div class="">

[gachon]

hola muy buenas,
me gustaria saber la diferencia que hay <div id=""> con <div class=""> pues porque he visto muchos ejemplos con <div id=""> y otros con <div class="">
exite diferencia o es lo mismo?


saludos

[caricatos]

Hola:

Los id's se referencian con el prefijo "#" y las clases con "."
Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Para aplicar estilos es mejor hacerlo con clases, aunque para casos aislados valen los id's... y además se referencian mejor con javascript.

Saludos

[gachon]

gracias por la aclaracion

[masterjail]

Hola! Voy a aprovechar este post para exponer una pequeña duda.

Los casos aislados a los que se refiere Caricatos, ¿son estilos que solamente se van a aplicar a un elemento?

Es que tengo un lio... siempre asigno un id a cualquier elemento que se me ocurra meter, y si el estilo que le voy a dar solo lo va a usar ese elemento pues lo defino con # y ya está.

¿Esto es correcto?
¿Sería mejor definir una clase aunque sepamos de antemano que solo la vamos a asignar a un elemento?

Aunque el efecto es el mismo, ¿es más... no sé... práctico o técnico o como queráis llamarlo el hacerlo con clases?

[fer10]

Hola! Voy a aprovechar este post para exponer una pequeña duda.

Los casos aislados a los que se refiere Caricatos, ¿son estilos que solamente se van a aplicar a un elemento?

Es que tengo un lio... siempre asigno un id a cualquier elemento que se me ocurra meter, y si el estilo que le voy a dar solo lo va a usar ese elemento pues lo defino con # y ya está.

¿Esto es correcto?
¿Sería mejor definir una clase aunque sepamos de antemano que solo la vamos a asignar a un elemento?

Aunque el efecto es el mismo, ¿es más... no sé... práctico o técnico o como queráis llamarlo el hacerlo con clases?

yo creo q ta eso depende de "programador", pero yo en lo personal con id solo divs importantes como head, footer y que solo las uso 1 vez para todo lo demas clases

[zekenet]

El id no sirve solo para asignarles estilo al div, sino para identificar un objeto en el documento, todos los elementos tienen id, una tabla, un iframe, etc. Despues mediante DOM podemos hacer referencia a el y tratar sus propiedades.

[caricatos]

Iniciado por zekenet

El id no sirve solo para asignarles estilo al div, sino para identificar un objeto en el documento, todos los elementos tienen id, una tabla, un iframe, etc. Despues mediante DOM podemos hacer referencia a el y tratar sus propiedades.

Hola:

Los id's deben declararse, y de no hacerse no existe... tal vez te hayas confundido con el atributo uniqueID del explorer... Y hay muchas formas de referenciar un elemento con el DOM... a partir del nodo raiz (document o mejor document.documentElement) los hijos de un nodo se indexan con el array childNodes... Los nodos padre son parentNode... el primer nodo es firstChild, el último lastChild... el siguiente de uno dado nextSibling...

Saludos

[zekenet]

no me equivoco con uniqueID, me refiero a acceder mediante document.getElementById("id")...... ,para acceder a el tienes que tener identificado el elemento mediante la propiedad id de la etiqueta, ya sea un div, table, input, etc..... Es decir que el id no solo vale para asignarle estilos sino para identificar elementos en nuestro documento. Vamos es la principal diferencia que yo veo entre id y class que es a lo que venia preguntando gachon
Por ejemplo para acceder a un input de un form no tengo que poner document.formulario.nombre_input.value si no que con poner document.getElementById("id_input").value accedo a el valor directamente.

[informante]

Segun la recomendacion W3C para HTML dice lo sgte:

Definiciones de atributos

id = name
Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento.

class = lista
Este atributo asigna un nombre de clase o un conjunto de nombres de clase a un elemento. Se puede asignar el mismo nombre o nombres de clase a cualquier número de elementos. Los nombres de clase múltiples deben estar separados por caracteres de espacio en blanco.

El atributo id tiene varios papeles en HTML:

* Como selector para las hojas de estilo.
* Como vínculo destino para vínculos de hipertexto.
* Como medio de hacer referencia a un elemento en particular desde un script.
* Como nombre de un elemento OBJECT declarado.
* Para procesos generales por parte de agentes de usuario (p.ej., para identificar campos cuando se transfieren datos desde páginas HTML hasta una base de datos, para traducir documentos HTML a otros formatos, etc.).


El atributo class, por otra parte, asigna uno o más nombres de clase a un elemento; se puede decir que el elemento pertenece a estas clases. Varios elementos pueden compartir el mismo nombre de clase. El atributo class tiene varios papeles en HTML:

* Como selector para hojas de estilo (cuando un autor desea asignar información de estilo a un conjunto de elementos).
* Para procesos generales por parte de agentes de usuario.


En resumen, para estilos es ideal usar CLASS.
ademas porque permite mezclar clases

<DIV CLASS="negrita centrado conborde"> ... </DIV>


ID deberia usarse para la programacion en JS
se puede acceder al objeto con

document.getElementById('idElemento')

Iniciado por gachon

hola muy buenas,
me gustaria saber la diferencia que hay <div id=""> con <div class=""> pues porque he visto muchos ejemplos con <div id=""> y otros con <div class="">
exite diferencia o es lo mismo?

saludos

[thunder.scripts]

Iniciado por zekenet

no me equivoco con uniqueID, me refiero a acceder mediante document.getElementById("id")...... ,para acceder a el tienes que tener identificado el elemento mediante la propiedad id de la etiqueta, ya sea un div, table, input, etc..... Es decir que el id no solo vale para asignarle estilos sino para identificar elementos en nuestro documento. Vamos es la principal diferencia que yo veo entre id y class que es a lo que venia preguntando gachon
Por ejemplo para acceder a un input de un form no tengo que poner document.formulario.nombre_input.value si no que con poner document.getElementById("id_input").value accedo a el valor directamente.

Creo que caricatos se refería a que no todos los elementos tienen id. Tenés que declararlo para que lo tengan.

Suerte
Fede

[iconogt]

Pues si, la explicación mas corta y clara para esa pregunta (debería estar en las faq's, por tantas veces que lo han preguntado), sería que id(#) es sólo para un elemento y class(.) se puede usar en varios elementos dependiendo de la declaración que se haga.

Por ejemplo:
si hacemos una declaración así:

#capa .clase {propiedad:valor;}

Entonces esto quiere decir que la clase sólo tendría que funcionar siempre y cuando esté dentro de el div que lleva por nombre #capa.

[hwelt]

Iniciado por caricatos

Hola:

Los id's se referencian con el prefijo "#" y las clases con "."
Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Para aplicar estilos es mejor hacerlo con clases, aunque para casos aislados valen los id's... y además se referencian mejor con javascript.

Saludos

Me parece que es buena aportacion la tuya solo que una observacion muy severa.

Es totalmente lo contrario...

EN SERIO es ALREVES

fijense esto que encontre en la pagina oficial de www (punto) w3 (punto) org

He aqui...

Código PHP:

  Rules for style rule precedences and inheritance depend on the style sheet language.
 
The following CSS STYLE declaration puts a border around every H1 element in the document and centers it on the page.
 
<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
 
To specify that this style information should only apply to H1 elements of a specific class, we modify it as follows:
 
<HEAD>
 <STYLE type="text/css">
   H1.myclass {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is affected by our style </H1>
 <H1> This one is not affected by our style </H1>
</BODY>
 
Finally, to limit the scope of the style information to a single instance of H1, set the id attribute:
 
<HEAD>
 <STYLE type="text/css">
   #myid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is not affected </H1>
 <H1 id="myid"> This H1 is affected by style </H1>
 <H1> This H1 is not affected </H1>
</BODY> 
   

[kseso?]

Por favor, señores Admin/mod
Han tenido que pasar 3 años
NO BORREN EL TEMA ni lo CIERREN
Que Caricatos pueda responder

Iniciado por hwelt

Iniciado por caricatos

Hola:

Los id's se referencian con el prefijo "#" y las clases con "."
Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Para aplicar estilos es mejor hacerlo con clases, aunque para casos aislados valen los id's... y además se referencian mejor con javascript.

Me parece que es buena aportacion la tuya solo que una observacion muy severa.

Es totalmente lo contrario...

EN SERIO es ALREVES

fijense esto que encontre en la pagina oficial de www (punto) w3 (punto) org

He aqui...

Código PHP:

  Rules for style rule precedences and inheritance depend on the style sheet language.

The following CSS STYLE declaration puts a border around every H1 element in the document and centers it on the page.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

To specify that this style information should only apply to H1 elements of a specific class, we modify it as follows:

<HEAD>
 <STYLE type="text/css">
   H1.myclass {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is affected by our style </H1>
 <H1> This one is not affected by our style </H1>
</BODY>

Finally, to limit the scope of the style information to a single instance of H1, set the id attribute:

<HEAD>
 <STYLE type="text/css">
   #myid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is not affected </H1>
 <H1 id="myid"> This H1 is affected by style </H1>
 <H1> This H1 is not affected </H1>
</BODY> 
   

[jomaruro]

Hola:

Kseso? no sé como coño lo consigues pero siempre me haces soltar alguna carcajada (cuando a veces es para llorar).

Saludos.