How to Override .ui-panelgrid td for specific <p:panelGrid>

Question

How do I override a specific <p:panelGrid> in my Stylecheet?

In according to this: How to hide time-slots ...

I tried:

#frm_dash\3Adisplay td.ui-panelgrid {
    padding:0px 0px;
}

and

#frm_dash\3Adisplay .ui-panelgrid td {
    padding:0px 0px;
}

But it seems not working.

The page is build in this physical structure:

<h:form id="frm_dash">
    [...]
    <p:panelGrid id="pnlg_page" style="width: 100%;">
        [...]
        <p:row>
            <p:column style="width: 50%; vertical-align: top" colspan="1">

                <p:panelGrid id="display" columns="2"> 
                    [...]
                </p:panelGrid> 

            </p:column>

            <p:column colspan="1" style="vertical-align: top;">
                [...]                                       
            </p:column>
        </p:row>
        [...]
    </p:panelGrid>
    [...]
</h:form>

Primefaces 3.4.1. - Tomcat 7.x - Mojarra

Thanks for your help.

Answer 1

You made 2 mistakes:

1. The \3A must be followed by a blank space.

2. The .ui-panelgrid class is been set on the <table> itself, not on a child of it.

So, this should do:

#frm_dash\3A display.ui-panelgrid td {
    padding: 0;
}

Or just this, as it makes no sense to use a classname selector on an element which is already selected by an ID which is by itself supposed to be unique already:

#frm_dash\3A display td {
    padding: 0;
}

As a different alternative, give the panel grid a style class so that you can reuse the same appearance on the other elements:

<p:panelGrid id="display" columns="2" styleClass="nopadding"> 

with (a more clean CSS selector)

table.nopadding td {
    padding: 0;
}

See also:

• How to use JSF generated HTML element ID with colon ":" in CSS selectors?