JSF/CSSアトリビュートセレクタ

Question

私は2列のテーブルを持っています。私は、特定の値が含まれている場合は、CSSを使用して2番目の列の値を異なるスタイルにしたいと思います。

ここでは、ビューの：

<h:dataTable id="tb_USER_DETAILS" border="1" var="userDtls" 
    value="#{freqViewTable.freqDtlsTable}" columnClasses="keydata, occupieddata" 
    style="width: 250px" styleClass="overalltable"> 
    <h:column id="frequency"> 
     <f:facet name="header"> 
      <h:outputText value="Frequency (Hz)" style="font-size:12pt" /> 
     </f:facet> 
     <h:outputText value="#{userDtls.keyFrequency}" style="font-size: 12pt"/> 
    </h:column> 
    <h:column id="slot"> 
     <f:facet name="header"> 
      <h:outputText value="Slot" style="font-size:12pt" /> 
     </f:facet> 
     <h:outputText id="slotdata" value="#{userDtls.occupiedFlag}" style="font-size: 12pt"/> 
    </h:column> 
</h:dataTable> 

CSSファイルは次のとおりです。

table { 
    background : Blue ; 
} 

table.overalltable th { 
    background : Yellow; 
} 

table.overalltable tr { 
    background : White; 
} 

table.overalltable .keydata { 
    background : Orange; 
} 

table.overalltable .occupieddata { 
    background : YellowGreen; 
} 

現在.occupieddataはYellowGreenです。値が「Occupied」の場合は、Redとします。

table.overalltable .occupieddata[occupiedFlag='Occupied'] { 
    background : Red; 
} 

またはこのような：

table.overalltable .occupieddata[slotdata='Occupied'] { 
    background : Red; 
} 

どのように私はこれを達成でき、次のような何か？

• のJava 1.6.0_22-B03
• JSF 1.2
• JSTL 1.2
• のEclipse 3.6.0（ヘリオス）
が
• のTomcat 6.0.28（実行する必要があります：私は、次のテクノロジを使用していますまた
• IE 7.0.5730.13
• のFirefox）のWeblogic上：3.6.12

Answer 1

これはうまくいかないでしょう。 <h:outputText>は、id属性とstyle属性を指定したため、HTML <span>要素をレンダリングします。次のように生成されたHTMLコードをチェックした場合、それは今、この

<td class="occupieddata"><span id="slotdata" style="font-size: 12pt">Occupied</span></td> 

のようになります、あなただけのこれに別のスタイルクラスを追加することができます。そう

<h:outputText id="slotdata" value="#{userDtls.occupiedFlag}" 
    style="font-size: 12pt" styleClass="#{userDtls.occupiedFlag}" /> 

それは次のように終わること：

<td class="occupieddata"><span id="slotdata" style="font-size: 12pt" class="Occupied">Occupied</span></td> 

あなたはその後、次のようにそれが赤のスタイルができます

table.overalltable .occupieddata .Occupied { 
    background : Red; 
} 

ところで、そのすべてをstyle="font-size:12ptのマークアップからスタイルシートに移動し、そこに属する場所を検討してください。