Last-child feature detection

HTML

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

JavaScript

// Last-child feature detection - try #1. Kindly inspired by http://jsfiddle.net/westonruter/eAVp2/
// Preliminary testing a success in IE6-8 on Windows XP; IE9, Chrome 12, Safari 5, FireFox 4 and Opera 11 on Windows 7 and Opera 11, FireFox 4, Safari 5 and Chrome 12 on Mac.
    // Creating style block
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    var rules = [
        '#modernizr-last-child li { display:block; background:#f00; width:100px; height:100px; } ',
        '#modernizr-last-child li:last-child { background:#00f; width:200px; }'
    ];
    // thanks http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
    if(style.styleSheet){
        style.styleSheet.cssText = rules.join('');
    }
    else {
        style.appendChild(document.createTextNode(rules.join('')));
    }
    head.appendChild(style);
    
    // Adding list and checking
    var list = document.createElement('ul');
    list.id = "modernizr-last-child";
    document.body.appendChild(list);
    var firstChild = document.createElement('li');
    list.appendChild(firstChild);
    var lastChild = document.createElement('li');
    list.appendChild(lastChild);
    var hasLastChild = lastChild.offsetWidth > firstChild.offsetWidth;

    // Clean up
    style.parentNode.removeChild(style);
    list.parentNode.removeChild(list);

    // Tell the world!
    document.getElementById("results").innerHTML = hasLastChild ? "Yes! I support the :last-child pseudo selector." : "No - so sorry, but I have no clue what the :last-child pseudo selector is."
    document.getElementById("results").style.color = hasLastChild ? "green" : "red" ;