primefaces style apply only to nested elements - css

Question

For removing the padding inside a Tab of the Primefaces TabView component, I created a new style on my css file:
.tabviewleft .ui-tabs .ui-tabs-panel {
padding: 0px 0px;
}
Then I tryed to apply this new style to the Tab. But it didn't work:
<p:tab id="fieldCategoryTab" title="category" styleClass="tabviewleft" >
Then I tryed applying on the TabView component. But it didn't work too:
<p:tabView id="tabViewLeft" styleClass="tabviewleft">
Then I created a div outside the TabView and it worked:
<div id="teste" class="tabviewleft">
Why I need to create a div outside the TabView to apply the style?
Is it possible to apply it directly to the Tab or TabView without creating a div?
Thank you in advance for any explanation.

Answer 1

Yes it is possible .
Suppose your <p:tabView>'s structure is like :
<p:tabView id="tabView" styleClass="tabView" dynamic="true"
cache="false">
<p:tab title="#{trhBundle['paidLeave']}" id="paid">
<h:form>
</h:form>
</p:tab>
<p:tab title="#{trhBundle['RTT']}" id="rtt">
<h:form>
</h:form>
</p:tab>
<p:tab title="#{trhBundle['specialLeave']}" id="special">
<h:form>
</h:form>
</p:tab>
</p:tabView>
Then add css
.tabView .ui-tabs-panel {
padding: 0px!important;
}
I think this will remove all padding of <p:tab>.