HTML
Clases e identificaciones

Introducción

Sintaxis

• class = "class1 class2 class3"
• id = "uniqueid"

Parámetros

Observaciones

Dar un elemento a una clase

Las clases son identificadores de los elementos a los que están asignados. Utilice el atributo de class para asignar una clase a un elemento.

<div class="example-class"></div>

Para asignar varias clases a un elemento, separe los nombres de las clases con espacios.

<div class="class1 class2"></div>

Usando clases en CSS

Las clases se pueden usar para estilizar ciertos elementos sin cambiar todos los elementos de ese tipo. Por ejemplo, estos dos elementos de span pueden tener estilos completamente diferentes:

<span></span>
<span class="special"></span>

Se pueden dar clases del mismo nombre a cualquier número de elementos en una página y todos recibirán el estilo asociado con esa clase. Esto siempre será cierto a menos que especifique el elemento dentro del CSS.

Por ejemplo, tenemos dos elementos, ambos con el highlight clase:

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

Si nuestro CSS es el siguiente, el color verde se aplicará al texto dentro de ambos elementos:

.highlight { color: green; }

Sin embargo, si solo queremos apuntar div con el highlight clase, podemos agregar especificidad como a continuación:

div.highlight { color: green; }

Sin embargo, cuando se diseña con CSS, generalmente se recomienda que solo se .highlight clases (por ejemplo, .highlight ) en lugar de elementos con clases (por ejemplo, div.highlight ).

Como con cualquier otro selector, las clases pueden ser anidadas:

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

También puede encadenar el selector de clase para seleccionar solo elementos que tengan una combinación de varias clases. Por ejemplo, si este es nuestro HTML:

<div class="special left menu">This text will be pink</div>

Y queremos colorear esta pieza específica de texto de color rosa, podemos hacer lo siguiente en nuestro CSS:

.special.left.menu { color: pink; } 

Dando a un elemento una identificación

El atributo ID de un elemento es un identificador que debe ser único en todo el documento. Su propósito es identificar de forma única el elemento cuando se vincula (mediante un ancla), las secuencias de comandos o el estilo (con CSS).

<div id="example-id"></div>

No debe tener dos elementos con la misma ID en el mismo documento, incluso si los atributos están unidos a dos tipos diferentes de elementos. Por ejemplo, el siguiente código es incorrecto:

<div id="example-id"></div>
<span id="example-id"></span>

Los navegadores harán todo lo posible para representar este código, pero puede producirse un comportamiento inesperado al estilizar el estilo con CSS o agregar funcionalidad con JavaScript.

Para hacer referencia a los elementos por su ID en CSS, prefije el ID con # .

#example-id { color: green; }

Para saltar a un elemento con una ID en una página determinada, agregue # con el nombre del elemento en la URL.

http://example.com/about#example-id

Esta función es compatible con la mayoría de los navegadores y no requiere JavaScript o CSS adicional para funcionar.

Problemas relacionados con identificaciones duplicadas

Tener más de un elemento con la misma ID es un problema difícil de solucionar. El analizador de HTML generalmente intentará renderizar la página en cualquier caso. Por lo general no se produce ningún error. Pero el ritmo podría terminar en una página web de mal comportamiento.

En este ejemplo:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

Los selectores de CSS todavía funcionan

#aDiv {
    color: red;
}

Pero JavaScript no puede manejar ambos elementos:

var html = document.getElementById("aDiv").innerHTML;

En este caso, la variable html solo lleva el primer contenido div ("a") .

Valores aceptables

Para una identificación

<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

<div id=" "> ... </div>

<div id="results"> ... </div>
<div id="results"> ... </div>

<div id="container"> ... </div>

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

Para una clase

Las reglas para las clases son esencialmente las mismas que para una id . La diferencia es que class valores de class no tienen que ser únicos en el documento.

Refiriéndose a los ejemplos anteriores, aunque esto no es válido en el mismo documento:

<div id="results"> ... </div>
<div id="results"> ... </div>

Esto está perfectamente bien:

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

Nota importante: cómo los valores de ID y clase se tratan fuera de HTML

Tenga en cuenta que las reglas y los ejemplos anteriores se aplican dentro del contexto de HTML.

El uso de números, puntuación o caracteres especiales en el valor de una id o una class puede causar problemas en otros contextos, como CSS, JavaScript y expresiones regulares.

Por ejemplo, aunque la siguiente id es válida en HTML5:

<div id="9lions"> ... </div>

... no es válido en CSS:

4.1.3 Caracteres y estuche

En CSS, los identificadores (incluidos los nombres de elementos, las clases y las ID en los selectores) pueden contener solo los caracteres [a-zA-Z0-9] y los caracteres ISO 10646 U + 00A0 y superior, más el guión (-) y el guión bajo ( _); no pueden comenzar con un dígito, dos guiones o un guión seguido de un dígito . _{(énfasis añadido)}

En la mayoría de los casos, es posible que pueda escapar de los personajes en contextos donde tienen restricciones o un significado especial.

Referencias W3C

• 3.2.5.1 El atributo id
• 3.2.5.7 El atributo de class
• 6.2 tipos básicos de SGML