Remove all border on all panelgrids not on datatables

Question

I need to hide all borders of all panelGrids using primefaces. The following code remove the borders on all panelGrids and dataTables too (primefaces 5+):

.ui-panelgrid tr, .ui-panelgrid td {
    border: none;
}

I need this effect only in panelGrids. After that and I need to know how to show the borders only in some panelGrids

Answer 1

Your CSS selectors are to 'broad'. They influence all <tr> and <td> tags that are descendants of a .ui-panelgrid, including all that are in a table that is in a panelgrid cell as descendants of the table that makes the datatable. So you have to make your selectors more specific (read about css specificity on mozdev) and have them only target a certain level .

Use e.g.

.ui-panelgrid > * > tr, .ui-panelgrid > * > tr > td.ui-panelgrid-cell {
     border: none;
}

This only targets <tr>'s that are a grandchild of a .ui-panelgrid and its direct <td> children.

If you don't want this applied to all panelgrids, You'll have to use the styleClass referred to in a comment above by @BhavinPanchani. But instead of explicitly adding borders by using a class, you prevent the css above to be applied.

.ui-panelgrid:not(.keepBorder) > * > tr, .ui-panelgrid:not(.keepBorder) > * > tr > td.ui-panelgrid-cell {
     border: none;
}

Just add the keepBorder class to the panelGrids that you want to keep the border. I did not test this last thing, but with a little testing you;

See also

• Can I write a CSS selector selecting elements NOT having a certain class?