Скрыть элемент HTML с помощью CSS, если в нем есть определенный текст?

Трудно манипулировать сайтами, если у них нет собственного класса для каждого элемента.

Например, как я могу скрыть второй элемент из этого кода ниже?

<p>
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</p>

Текст никогда не меняется внутри элемента.

Я использую Стильный с Firefox для редактирования CSS/HTML для веб-сайтов.

Источник

1 ответ

Решение

Я не знаю, как использовать логику (определить значение в теге и сделать что-то конкретное), используя только CSS и HTML, для этого вам понадобится Javascript или какой-то другой. Но если вы хотите скрыть второй элемент p в текстовом блоке, вы можете сделать это с помощью CSS-селектора n-го типа:

Оберните ваши p-теги в div и присвойте div класс.

<div class="HideChild">
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</div>


Затем в вашем CSS создайте селектор вот так:

.HideChild p:nth-of-type(2)
{
display: none;
}


Обертывание тегов p в div и использование класса означает, что вы можете повторно использовать эту функцию для нескольких текстовых блоков на вашей странице. Если вы хотите изменить, какая строка скрыта, измените число после nth-child, и если вы хотите, чтобы на странице показывался пробел, где следует заменить строку display: none с visibility: hidden,

Источник
Другие вопросы по тегам