Apply styleClass to parent panelGrid element and not to children - css

Question

I'm trying to apply a styleClass to a h:panelGrid without applying it to its children:
<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
<p:fieldset id="fs1" legend="fs1" style="width: max-content">
<h:panelGrid columns="3">
<p:outputLabel for="id1" value="#{messages.label_application}" />
<p:selectOneMenu id="id1" required="true" value="som">
<f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />
<f:selectItems value="#{bean.availableItems}" />
</p:selectOneMenu>
<p:message for="id1" />
</h:panelGrid>
</p:fieldset>
<p:fieldset id="fs2" legend="fs2" style="width: max-content">
<h:panelGrid columns="3">
<!--more fields-->
</h:panelGrid>
</p:fieldset>
</h:panelGrid>
My topAligned css:
.topAligned td{
vertical-align: top !important;
}
The problem is that I need to top align the two fieldset and that works well with the styleClass I apply, but it also applies this styleClass to all the children. Therefore, all the fields (outputLabel, selectOneMenu, etc...) of the two fieldset get top aligned too...
I tried all the different ways to specify the top alignment from this question but without success... I also tried to look at the html source but it gets a bit confusing with all the jsf and primefaces stuff...
If you know a trick that will work...

Answer 1

With
.topAligned td{
vertical-align: top !important;
}
and the JSF-generated HTML output
<table class="topAligned">
...
</table>
you're basically applying the style on every single <td> element of the <table>, also those of the nested <table>s.
If you want to apply the style on only the immediate <td> elements of the parent <table>, then you should be using columnClasses attribute instead:
<h:panelGrid ... columnClasses="topAligned,topAligned">
with
.topAligned {
vertical-align: top;
}
This will end up in the generated HTML output as follows:
<table>
<tbody>
<tr>
<td class="topAligned">...</td>
<td class="topAligned">...</td>
</tr>
</tbody>
</table>
and not be applied on the <td>s of the nested <table>s.
Note that I also removed the nonsensicial !important workaround. It's supposed to be used only when you want to override a hardcoded style by an external CSS style.
Also note that this problem is not specifically related to JSF. JSF is in the context of this question merely a HTML code generator. You'd have had exactly the same problem when dealing with "plain vanilla" HTML/CSS. The problem is more in the lack of familiarity with basic HTML and CSS. On http://htmldog.com you can find decent HTML/CSS tutorials.