Multiple class attributes in HTML

Question

What happens when an element has multiple class attributes?

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

I'm trying to add a class to the output of post_class(); in a WordPress plugin, but the function itself is creating the entire part class="one two three"

Is it equivalent to class="one two three four"? Or does the first or second win? Or is it undefined behaviour, in which case what do the major browsers do?

If you know the correct way of adding a class to this snippet (WordPress plugin), then that would also be appreciated!

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

Answer 1

What happens when an element has multiple class attributes?

When an attribute is declared multiple times for a single element (which is invalid HTML, by the way), behavior-wise the first value will override all subsequent values for the same attribute. So in this case, your element will only have the classes one two three.

This behavior is explained in the HTML5 spec, 8.2.4.35 Attribute name state, "... if there is already an attribute on the [element] with the exact same name, then this is a parse error and the new attribute must be removed..."

If you know the correct way of adding a class to this snippet (WordPress plugin), then that would also be appreciated!

Typically, if you need to add custom classes dynamically to your WordPress posts, you hook onto the post_class filter and manipulate the $classes array as necessary. Here's what it roughly looks like in my themes:

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' );

If you only need to add one or more static classes, pass them as a space-delimited string directly to post_class():

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

More on this in the WordPress Codex.

Answer 2

Then the document will be invalid and the browser will attempt to perform error recovery.

From the HTML 5 specification:

If the attribute's name is already in attribute list, then return to the step labeled attributes.

So, if an HTML 5 parser is being used, the first attribute should apply.