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.