CSS [custom?] attributes

Question

radio[pane] {
 list-style-image: url("jar:resource:///chrome/classic.jar!
         /skin/classic/browser/preferences/Options.png");
}

radio[pane="prefpane-appearance"] {
 -moz-image-region: rect(0px, 32px, 32px, 0px);
}
radio[pane="prefpane-appearance"]:hover,
radio[pane="prefpane-appearance"][selected="true"] {
 -moz-image-region: rect(32px, 32px, 64px, 0px);
}

Can anyone explain a syntax of this css, particularly what is pane.. I couldn't find such attribute for radio element in context of XUL. So I guess it's some custom attribute? If it is, then how it is evolving through the lines, first declaration, then several assignments? It has also selected, which means can have multiple custom attributes? How can those attributes be used later?

Answer 1

The brackets selector ([]) selects by attribute.

The following matches any image with the title attribute set to something:

img[title] { /* stuff */ }

The following matches any image whose src attribute is foo.png:

img[src="foo.png"] { /* stuff */ }

So your example rules match respectively:

1. radio elements with a pane attribute;
2. radio elements whose pane attribute is set, and is equal to prefpane-appearance;
3. hovered radio elements whose pane attribute is set, and is equal to prefpane-appearance;
4. radio elements whose pane attribute is set and is equal to prefpane-appearance, and whose selected attribute is set and is equal to true.