Log in / Register

Forum › How do I...?

CSS selector with element attribute and first-of-type

mn4367
I'm trying to set the value of a string-set with the following CSS:
meta[name="mykey"] {
    string-set: mystringset attr(content);
}

This works without any problems but for some reasons I have multiple meta elements with name="mykey" in the head and I'd like to use only the first one. So I used
meta[name="mykey"]:first-of-type {
    string-set: mystringset attr(content);
}

But unfortunately I had no success with :first-of-type. What am I doing wrong?

Thanks,
Michael
mikeday
The :first-of-type selector does not actually combine with the attribute selector in the way that you might expect. It's actually going to select the first <meta> element in the <head>, if and only if it has name="mykey". If you want to use CSS selectors to do this you have to get sneaky:
meta[name="mykey"] { string-set: mystringset attr(content) }
meta[name="mykey"] ~ meta[name="mykey"] { string-set: none }

Or something like that. :)
mn4367
OK, thanks!

Just out of curiosity, is there something similar for the last element? :-)
mikeday
Ooh that's a tough one. Not yet, no. Maybe when we support CSS4 Selectors.

Of course in the meantime, you can always use JavaScript to do just about anything.
mn4367
No problem, currently I don't need it, thanks!
mikeday
Prince 11 is out and now supports CSS4 selectors. :)