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

1

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

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

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

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

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

html css stylish Новобранец
источник
При каких условиях он должен быть скрыт? Я предполагаю, что вы хотите скрыть это программно
CLockeWork
Он должен быть скрыт, если внутри HTML-элемента есть текст "st", а второй - там. Я не знаю лучшего способа сказать, какой элемент скрыть, разве что у CSS есть возможность указать на n-й элемент?
Новичок
У CSS действительно есть такая особенность: w3schools.com/cssref/sel_nth-child.asp
CLockeWork

Ответы:

2

Я не знаю, как использовать логику (определить значение в теге и сделать что-то конкретное), используя только 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 и использование класса означает, что вы можете повторно использовать эту функцию для нескольких текстовых блоков на вашей странице. Если вы хотите изменить , какая строка скрыта изменить номер после п-го ребенка, и если вы хотите страницу , чтобы показать разрыв , где линия должна заменить display: noneс visibility: hidden.

CLockeWork
источник
Кажется, работает, но он не считает, какой это тип элемента, скажем, внутри класса HideChild есть несколько ссылок, и некоторые теги <p>, которые я хочу скрыть. затем, когда количество ссылок изменяется, функция nth-child больше не знает, какой элемент скрыть.
Новичок
Другой вариант - перебрать их и использовать jquery$(this).contains("");
nerdwaller
Хороший вопрос @ Rookie, обновил мой ответ, чтобы использовать вместо этого селектор nth-of-type
CLockeWork
Работает теперь без нареканий! Где вы найдете все эти возможности CSS? Есть ли сайт со списком всех команд CSS, и я мог бы изучить их одну за другой?
Новичок
@nerdwaller, возможно ли использовать JS со Стильным?
Новичок