Geek Answers Handbook

CSS Style Component Class

How to change component properties using CSS?

Say I have two buttons:

<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">

I want all my buttons to have font-size: 14px;, so I added this rule:

.ui-button .ui-button-text{
   font-size:14px;
}

But my smallButton should have a different size, so I added:

.smallButton{
   font-size:11px;
}

Unfortunately this will not work. This is created by HTML:

<button class="ui-button ui-widget ui-state-default ui-corner-all
    ui-button-text-only smallButton" (...)>
    <span class="ui-button-text ui-c">MY TEXT</span>
</button>

The text of this button is 14px. How does CSS look like to have all my smallButton font-size: 11px ?

+4
source share
3 answers

I found a solution to my problem. All I have done is:

.smallButton.ui-button-text-only .ui-button-text {
    font-size: 11px;
}

, ui-button-text-only .ui-button-text smallButton. , .smallButton, . . .

+3

CSS. CSS - . , , .smallButton , css, .

CSS (. )

, CSS , :

<f:facet name="last">
  <h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>

!important, .

. Chrome , 11 ui-button-text , 14 .

<style>
.ui-button-text{
   font-size:14px;
}
.smallButton .ui-button-text {
   font-size:11px;
}
</style>

<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>

, html ui-button.

+9

PrimeFaces css .

css :

form .smallButton{
   font-size:11px;
}

!important:

.smallButton{
   font-size:11px !important;
}

. :

+2
source

More articles:


All Articles