1

Решил почистить таблицы от классов для уменьшения объема файла, заменив их псевдоклассами. но не до конца разобрался с особенностями их значений, все время какой-то кусок кода малину портит. Помогите связать четыре элемента span для всех строк таблиц. Стили у всех таблиц - одинаковые.

<style>

table.route (???) {}                    /* 1 */
table.route (???) {}                    /* 2 */
table.route (???) {}                    /* 3 */
table.route td span:nth-of-type(2) {}   /* 4 */

</style>


<table class="route"><tbody>
    <tr>
        <td>
            <span>[text]</span></td> <!--1-->
        <td>
            <div></div></td>
        <td>
            <div>
                <div></div>
                <span>[text]</span> <!--2-->
                <div></div></div>
            <span>[text]</span> <!--3-->
            <span>[text]</span> <!--4-->
        </td>
    </tr

    . . .
        . . .
            . . .
    . . .
        . . .

</tbody></table>

1 ответ 1

3

Ты делаешь что-то очень сомнительное и странное. Вероятно, так делать не стоит. Но если уж очень хочется, то можно так:

.route td > span:first-child::after { content: "#1" }
.route td > div span::after { content: "#2" }
.route td > div + span::after { content: "#3" }
.route td > span + span::after { content: "#4" }
<table class="route"><tbody>
    <tr>
        <td>
            <span>[text-1]</span></td> <!--1-->
        <td>
            <div></div></td>
        <td>
            <div>
                <div></div>
                <span>[text-2]</span> <!--2-->
                <div></div>
            </div>
            <span>[text-3]</span> <!--3-->
            <span>[text-4]</span> <!--4-->
        </td>
    </tr>
</tbody></table>

2
  • Возможно, я не корректно сформулировал вопрос - стили строк всех таблиц идентичны, но контент разный, поэтому мне без after и content :). В целом ваш ответ достаточен, Спасибо!
    – J. Doe
    11 мар 2017 в 21:49
  • @J.Doe, но селекторы-то те же (ну кроме ::after). Я мог бы цвета прописать просто, но решил, что after c контентом выглядит нагляднее :)
    – Qwertiy
    11 мар 2017 в 21:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.