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

7528
Rookie

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

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

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

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

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

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

1 ответ на вопрос

2
CLockeWork

I don't know of a way of using logic (identifying a value in a tag and doing something particular) using just CSS and HTML, you'd need Javascript or some such for this. But if you're looking to hide the second p element in the text block you can do this using the nth-of-type CSS selector:

Wrap your p tags in a div and give the div a class.

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


Then in your css create a selector like this:

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


Wrapping the p tags in a div and using a class means you can reuse this function for multiple text blocks on your page. If you want to change which line is hidden change the number after nth-child, and if you want the page to show a gap where the line should be replace display: none with visibility: hidden.

Кажется, работает, но он не считает, какой тип элемента, скажем, есть несколько ссылок внутри класса HideChild, и некоторые

теги, которые я хочу скрыть. затем, когда количество ссылок изменяется, функция nth-child больше не знает, какой элемент скрыть.

Rookie 10 лет назад 0
Другой вариант - перебрать их и использовать jquery `$ (this) .contains (" ");` nerdwaller 10 лет назад 0
Хороший вопрос @ Rookie, обновил мой ответ, чтобы использовать вместо этого селектор nth-of-type CLockeWork 10 лет назад 0
Работает без нареканий сейчас! Где вы найдете все эти возможности CSS? Есть ли сайт со списком всех команд CSS, и я мог бы изучить их одну за другой? Rookie 10 лет назад 0
@nerdwaller, можно ли использовать JS со Стильным? Rookie 10 лет назад 0
@Новобранец; http://www.w3schools.com/ Научит вас всему, что вам нужно знать, и содержит справочные страницы для всего. Он охватывает HTML, CSS, JavaScript, SQL, PHP ... Я так или иначе узнал: D CLockeWork 10 лет назад 0
@CLockeWork, как называется эта магия, такая как "nth-of-type"? Я не могу найти страницу с перечисленными. Rookie 10 лет назад 0
@Rookie, это селекторы CSS http://www.w3schools.com/cssref/css_selectors.asp (и они могут революционизировать способ создания сайтов: D) CLockeWork 10 лет назад 0
@rookie - Извините, я никогда не использовал стильный. Я склонен отдавать предпочтение пользовательским сценариям для такого приложения. nerdwaller 10 лет назад 0
@nerdwaller, приложение, как что? Это не так, как на каждом сайте есть приложение с пользовательским скриптом. Rookie 10 лет назад 0
@rookie - скрыть определенный элемент на заданной странице или исправить внешний вид конкретной страницы. nerdwaller 10 лет назад 0
@nerdwaller, как я могу использовать эти пользовательские скрипты? Я хочу сделать еще кое-что с HTML, что я не могу сделать с помощью CSS. Rookie 10 лет назад 0
@ Новичок - взгляните на [Greasemonkey Wiki] (http://wiki.greasespot.net/Main_Page), там вы сможете найти все, что вам нужно. Также вы можете посмотреть на источник пользовательских скриптов на [Userscripts.org] (http://userscripts.org). Заголовок - это обязательный элемент, кроме того - делайте все, что вам нужно. nerdwaller 10 лет назад 0

Похожие вопросы