Выбор n-го элемента класса X - PullRequest
0 голосов
/ 13 декабря 2011

Как я могу выбрать n-й элемент класса X, используя только селекторы CSS 3?В частности, мне нужно выбрать каждую четную строку таблицы в таблице, чтобы применить стиль, но иногда я вставляю строку таблицы, которую нужно игнорировать, потому что это не данные.

Я пытался использовать

tr.X:nth-child(even)
.X::nth-child(even)

и я знаю, что :nth-of-type() существует, но ни один из них не отвечает моим требованиям.

Возможно ли достичь этого с помощью чистогоCSS3?Если нет, то я не против, но я буду рад услышать ваши идеи.

HTML table

<table class="txls">
    <thead class="centro">
        <tr class="bg-gris">
            <td class="txlsb" rowspan="2" width="14">&nbsp;</td>
            <td class="txlsb" rowspan="2">Linea</td>
            <td class="txlsb" colspan="7">Kilometros</td>
        </tr>
        <tr class="bg-gris">
            <td class="txlsb" width="100">Atenci&oacute;n</td>
            <td class="txlsb" width="100">Derecho de via</td>
            <td class="txlsb" width="100">Administrativos</td>
            <td class="txlsb" width="100">Contencioso</td>
            <td class="txlsb" width="100">Expropiados</td>
            <td class="txlsb" width="100">Construccion</td>
            <td class="txlsb" width="100">Regularizados</td>
        </tr>
    </thead>
    <tbody>
        <tr class="X">
            <td class="txlsb"><img src="imgs/collapse-medium-green.png" /></td>
            <td class="txlsb">XXX-45820-YYY</td>
            <td class="txlsb">12.50</td>
            <td class="txlsb">60.12</td>
            <td class="txlsb">8.00</td>
            <td class="txlsb">10.00</td>
            <td class="txlsb">0.00</td>
            <td class="txlsb">0.00</td>
            <td class="txlsb">18.00</td>
        </tr>
        <tr >
            <td class="txlsb bg-cancel">&nbsp;</td>
            <td class="txlsc" colspan="8">
                <table class="txls w100">
                    <thead>
                        <tr class="bg-verde2">
                            <td class="txlsb" width="14"><img src="imgs/collapse-medium-green.png" /></td>
                            <td class="txlsb">Zona Foo</td>
                            <td class="txlsb" width="100">3.00</td>
                            <td class="txlsb" width="100">1.00</td>
                            <td class="txlsb" width="100">0.00</td>
                            <td class="txlsb" width="100">0.00</td>
                            <td class="txlsb" width="98">4.00</td>
                        </tr>
                    </thead>
                    <tbody class="">
                        <tr>
                            <td class="txlsb bg-cancel">&nbsp;</td>
                            <td class="txlsc" colspan="6">
                                <table class="txls w100">
                                    <thead class="centro">
                                        <tr class="bg-gris2">
                                            <td class="txlsb"  width="100">Tramite</td>
                                            <td class="txlsb">Num. Caso</td>
                                            <td class="txlsb">Expediente</td>
                                            <td class="txlsb">Predio</td>
                                            <td class="txlsb" width="55">T. Inicial</td>
                                            <td class="txlsb" width="55">T. Final</td>
                                            <td class="txlsb bg-cancel" width="96">&nbsp;</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="X">
                                            <td class="txlsb">Administrativo</td>
                                            <td class="txlsb">12</td>
                                            <td class="txlsb">YC-AGR-12390-2011</td>
                                            <td class="txlsb">la chuchita</td>
                                            <td class="txlsb">12.1</td>
                                            <td class="txlsb">25.0</td>
                                            <td class="txlsb">3.00</td>
                                        </td>
                                        <tr class="X">
                                            <td class="txlsb">Contencioso</td>
                                            <td class="txlsb">13</td>
                                            <td class="txlsb">YC-AGR-52323-2011</td>
                                            <td class="txlsb">el almendro</td>
                                            <td class="txlsb">50.0</td>
                                            <td class="txlsb">51.0</td>
                                            <td class="txlsb">1.00</td>
                                        </td>
                                    </tbody>
                                </table>
                            </td>
                        </td>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="X">
            <td class="txlsb"><img src="imgs/expand-medium-green.png" /></td>
            <td class="txlsb">AAA-83010-BBB</td>
            <td class="txlsb">50.92</td>
            <td class="txlsb">92.45</td>
            <td class="txlsb">10.08</td>
            <td class="txlsb">0.00</td>
            <td class="txlsb">0.00</td>
            <td class="txlsb">0.00</td>
            <td class="txlsb">0.00</td>
        </tr>
    </tbody>
</table>

1 Ответ

2 голосов
/ 13 декабря 2011

Спецификации CSS4 требуют псевдоселекторов :nth-match(), но в настоящее время нет ни одного доступного для использования.Все текущие псевдоселекторы находятся в контексте всех элементов, которые он может просматривать в текущей ветви.nth-child(even) применяется только к tr, а не к .X.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...