Accessing Treechildren in Xul for Styling

I have this code in xul:

<treechildren id = "mainTree_treechildren">
    <treeitem container="true" open="true">
        <treerow>
           <treecell label="&tree.actions;" />
        </treerow>
        <treechildren id="tree_actions_treechildren" >
            <treeitem container="true" open="true">
                <treerow>
                     <treecell label="&tree.actions.warnings;" />
                </treerow>
            </treeitem>
        </treechildren>
     </treeitem>
</treechildren>

and i have problem styling it. I need to have to different text colors for treecell in mainTree_treechildren and different text color for treecell in his child treechildren with id tree_actions_treechildren.

At the moment I have this css code

#mainTree #mainTree_treechildren::-moz-tree-cell-text { color: #000000; }
#mainTree #tree_actions_treechildren::-moz-tree-cell-text { color: #FFFFFF; }

But it doesn't work. I only get black color for every element inside mainTree_treechildren including tree_actions_treechildren.

1 Answer

The <treechildren> elements aren't actually being displayed - they are merely the data source for the tree widget (other data sources are also possible, e.g. RDF or XML files). Consequently, their contents cannot be styled directly. If you want to style individual tree cells differently you should use the properties attribute. Something like this should work:

<treechildren id="mainTree_treechildren">
    <treeitem container="true" open="true">
        <treerow>
           <treecell label="&tree.actions;" />
        </treerow>
        <treeitem container="true" open="true">
            <treerow>
                <treecell label="&tree.actions.warnings;" properties="warning" />
            </treerow>
        </treeitem>
     </treeitem>
</treechildren>

And the corresponding styles:

#mainTree_treechildren::-moz-tree-cell-text { color: #000000; }
#mainTree_treechildren::-moz-tree-cell-text(warning) { color: #FF0000; }

Note that using CSS selectors like #foo #bar isn't recommended - an ID is always unique so specifying more than one in a selector will only slow things down.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Marcus Vance

Marcus Vance

Cybersecurity & Digital Privacy Researcher

Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.

Share this article
Twitter Facebook Pinterest