Search code examples
cssprimefacescss-specificity

p:tree TreeNode background-color

I have the following scenario: I want to build a website using PrimeFaces. The following section is rendered white, but it should be red.

        <p:tree value="#{index.root}" var="node" style="width: 100%">
            <p:treeNode type="FAIL" styleClass="fail">
                <span style="cursor: pointer;"
                    onclick="this.parentNode.parentNode.firstChild.click();"> <h:outputText
                        value="#{node}" /> <h:commandButton value="Mark as handled" />
                </span>
            </p:treeNode>
        </p:tree>

index.css

.fail {
    background-color: red;
    color: white;
}

Investigating the treeNode in Firefox Inspector I see the following structure

firefoxinspector

If I uncheck the background-color: transparent from .ui-tree .ui-tree-node section, the tree is rendered red (as it should be).

Does anybody know why the browser exhibit this behavior and how I can fix it?

Thank you.

Solution

  • As we've worked out in the comments below the question, use

    .ui-tree .ui-treenode.fail

    to overwrite the Primeface CSS rules. This is because the selector is more specific this way. As Tim Schoch said in his answer.