Atributos de clase múltiple en HTML

Question

¿Qué sucede cuando un elemento tiene múltiples atributos class?

<div id="test" class="one two three" class="four"> 

Estoy tratando de agregar una clase a la salida del post_class(); en un plugin de WordPress, pero la propia función es la creación de toda la parte class="one two three"

¿es equivalente a class="one two three four"? ¿O la primera o la segunda victoria? ¿O es un comportamiento indefinido, en cuyo caso, qué hacen los principales navegadores?

Si conoce la forma correcta de agregar una clase a este fragmento (plugin de WordPress), ¡eso también sería de agradecer!

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 

Answer 1

Lo que ocurre cuando un elemento tiene varios atributos de clase?

Cuando un atributo se declara varias veces para un único elemento (que es HTML no válido, dicho sea de paso), el primer valor prevalecerá sobre todos los valores posteriores para el mismo atributo. Entonces, en este caso, su elemento solo tendrá las clases one two three.

Este comportamiento se explica en the HTML5 spec, 8.2.4.35 Attribute name state, "... si ya hay un atributo en el [elemento] con el mismo nombre exacto, entonces este es un error de análisis y el nuevo atributo debe eliminarse ..."

Si conoce la forma correcta de agregar una clase a este fragmento (plugin de WordPress), ¡eso también sería de agradecer!

Normalmente, si es necesario agregar clases personalizadas de forma dinámica a sus puestos de WordPress, puede enchufarse en el filtro post_class y manipular la matriz $classes según sea necesario. Esto es lo que más o menos se parece en mis temas:

function nv_post_class($classes) { 
    // Most recent post on the front page 
    global $count; 
    if (is_home() && 1 == $count) 
     $classes[] = 'latest-post'; 

    return $classes; 
} 

add_filter('post_class', 'nv_post_class'); 

Si sólo necesita añadir uno o más estáticas clases, los pasa como una cadena delimitada por espacios directamente a post_class():

<div id="post-<?php the_ID(); ?>" <?php post_class('myclass1 myclass2'); ?>> 

Más sobre esto en el WordPress Codex.

Answer 2

A continuación, el documento no será válido y el navegador intentará realizar la recuperación de errores.

Desde el HTML 5 specification:

Si el nombre del atributo ya está en la lista de atributos, a continuación, volver a los atributos de paso marcado.

Por lo tanto, si se utiliza un analizador HTML 5, se aplicará el primer atributo.