Как избежать использования JavaScript с селектором атрибутов CSS

#javascript #css #attributes #css-selectors

#javascript #css #атрибуты #css-селекторы

Вопрос:

Я пытаюсь скрыть последующие tr с помощью role =»metadata» и того же идентификатора группы данных, что и первый встречающийся tr.

Я не могу использовать JavaScript здесь, и я пытаюсь достичь этого, используя чистый CSS.

 <table>
    <tbody>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="1" role="metadata">
            <td>
                First rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="1" role="data">
            <td>
                Row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be hidden -->
        <tr data-group-id="1" role="metadata">
            <td>
                Rows group title
            </td>
        </tr>
        <!-- END this tr should be hidden -->
        <tr data-group-id="1" role="data">
            <td>
                Another row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="2" role="metadata">
            <td>
                Second rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="2" role="data">
            <td>
                Row belonging to group 2
            </td>
        </tr>
    </tbody>
</table>

Селекторам нравится это…

 [data-group-id="1"][role~="metadata"] ~ [data-group-id="1"][role~="metadata"]
    display: none

… работает очень хорошо, за исключением того, что идентификатор группы данных может динамически меняться.

Что-то вроде этого было бы идеально (я знаю, что это недопустимый код CSS, это просто моя фантазия с регулярными выражениями, которые помогут проиллюстрировать проблему):

 [data-group-id="(.*?)"][role~="metadata"] ~ [data-group-id="\1"][role~="metadata"]

Есть ли какой-либо способ добиться этого, используя только CSS?

Заранее спасибо.

1. Я думаю, что единственный способ, которым вы можете сделать это только с помощью CSS, — это написать огромный список (как высоко можно data-group-id подняться?). Так что да, используйте JavaScript.

2. Я думаю, что до 9,223,372,036,854,775,807 (int64 ;)).

3. Если вы не можете использовать JavaScript, то какой смысл в любом случае скрывать информацию на странице? Как используются скрытые метаданные?

4. Это нужно только скрыть от просмотра пользователями.

Ответ №1:

Мне кажется, что использование data-group-id в CSS непрактично, тем более что оно динамически изменяемо и условия того, скрыт элемент или нет, меняются. В итоге вы получаете огромный кусок CSS, который невозможно поддерживать.

При первоначальном рендеринге, возможно, было бы лучше добавить className , чтобы вы определяли на стороне сервера, должно ли отображаться начальное состояние или нет.

 <tr data-group-id="1" role="data" class="hidden">
    <td>Another row belonging to group 1</td>
</tr>

Я предполагаю, что JavaScript используется для динамического изменения data-group-id , так почему бы не использовать JavaScript для добавления / удаления className «скрытого», когда / где это имеет смысл. По крайней мере, в JavaScript вы МОЖЕТЕ использовать регулярные выражения 😉

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

Вам в любом случае придется написать некоторый код для достижения этой цели, с таким же успехом вы могли бы сделать это чистым способом, вместо того чтобы пытаться встроить его в язык стилей, который не подходит для этой работы.

1. Спасибо за ваш ответ. Я работаю с Mustache ( mustache.github.com ) и один и тот же файл макета может использоваться на нескольких клиентских и серверных языках. Вот почему так много проблем, которые нужно решить. Я думаю, что я вынужден использовать JavaScript здесь.