Low-specificity IDs

by csswizardry

HTML

<div id="foo" class="foo">Foo</div>

<div id="bar" class="bar">Bar</div>

CSS

/**
 * The ID wins.
 */
#foo {
    color: red;
}

.foo {
    color: green;
}





/**
 * The class wins.
 */
[id="bar"] {
    color: red;
}

.bar {
    color: green;
}