CSS Selector based on font-weight?

Question

Is it possible to create a selector that would identify elements with specific HTML font-weight properties?

Something like (fake example):

div[font-weight^='900']{
    font-family:"HaasGrotDisp55Roman";
}
div[font-weight^='500']{
    font-family:"HaasGrotDisp35Thin";
}

w/ font-face css definitions as:

@font-face {
    font-family: 'HaasGrotDisp35Thin';
    src: url('fonts/neuehaasgrotdisp-35thin.eot');
}
@font-face {
    font-family: 'HaasGrotDisp55Roman';
    src: url('fonts/neuehaasgrotdisp-55roman.eot');
}

Answer 1

You could do the following:

/* Your fonts */
@font-face {
    font-family: 'HaasGrotDisp';
    src: url('fonts/neuehaasgrotdisp-35thin.eot');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'HaasGrotDisp';
    src: url('fonts/neuehaasgrotdisp-55roman.eot');
    font-weight: 900;
    font-style: normal;
}

body { font-family: "HaasGrotDisp" }

h1,h2,h3 { font-weight: 900 }

This minifies it to only one font-family. Simply assign the different weights inside your @font-faces

And as for your attribute like query: I would suggest using semantic classes to use it with divs.

Answer 2

Nope. Add classes to elements so that you can apply certain font-weight's to those elements. Use those same classes for to "identify" elements that have a certain font-weight. That's how CSS works.