Селектор атрибутов JSF / CSS

Question

У меня есть таблица с двумя столбцами.Я хотел бы стилизовать значение второго столбца по-разному, используя CSS, когда он содержит определенное значение.

Вот представление:

<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.Я хотел бы, чтобы это было 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 (Helios)
• Tomcat 6.0.28 (необходимо также запустить на Weblogic)
• IE 7.0.5730.13
• Firefox: 3.6.12

Answer 1

Это не сработает. Ваш <h:outputText> отображает элемент HTML <span>, потому что вы указали атрибуты id и style для него. Если вы проверили сгенерированный 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 из разметки в таблицу стилей там, где она должна быть.