☰

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

tag-icon • tag-icon html css stylish
Скрыть HTML-элемент с помощью CSS, если в нем есть определенный текст?

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

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

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

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

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

решение1

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

Оберните теги p в 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.

Связанный контент