Проверка значения title и скрытие блока div
Есть два div
:
<div class="warning1" title = "Леопард">
<p>Beware of the leopard</p>
</div>
<div class="warning2">
<p>Beware of the leopard</p>
</div>
Можно ли с помощью css проверить содержимое title
warning1
и если title
не равен "Леопард"
то скрыть warning2
?
.warning2
{
display: none;
}
<div class="header" ><div class="navigation-bar-width-sticky header-view__left-area" ><div
class="button hamburger header-view__button header-view__button_hamburger">
<div class="button__content">
</div>
</div>
<div class="header-logo header-view__logo">
</div>
</div>
<div class="header-view__main">
<div class="entity-creation-menu header-view__entity-creation-menu" title="Создать"><div class="button popup-button__button entity-creation-menu__popup-button">
<div class="button__content button__content_has-text button__content_has-icon popup-button__button-content" title="Создать н">
<span class="button__text popup-button__button-text">11</span>
</div>
</div>
</div>
<div class="global-search-panel header-view__search"><div class="search-panel global-search-panel__search-panel" id="global-search-panel"><input class="search-panel__text global-search-panel__search-panel-text" type="text" spellcheck="false" placeholder="Искать " value="">
</div>
<div class="button global-search-panel__advanced-search-button"><div class="button__content button__content_has-text">
<span class="button__text">поиск</span>
</div></div></div></div>
<div class="header-view__right-area">
<div tabindex="-1" id="widgets-context-button" class="button header-view__button"><div class="button__content" >
<</div>
<</div>
<div class="current-user-info header-view__button" title="11">
<div tabindex="-1" class="button popup-button__button current-user-info__popup-button"><div class="button__content popup-button__button-content current-user-info__popup-button-content" data-has-expander="false" title="Леопард"></div></div></div></div></div>
И вот нужно скрыть
class="global-search-panel header-view__search"
если title
в current-user-info
не равен "Леопард"
.
Ответы (1 шт):
Да, проверить содержимое title возможно с помощью селектора по атрибуту:
.warning1[title="Леопард"] + .warning2 { display: none; }
<div class="warning1" title="Леопард">
<p>Beware of the leopard 1</p>
</div>
<div class="warning2">
<p>Beware of the leopard 2</p>
</div>
мне нужно проверить что title не равен "Леопард" И если он не равен,то скрывать...
Тогда необходимо в селектор добавить псевдокласс :not()
:
.warning1:not([title="Леопард"]) + .warning2 { display: none; }
<div class="warning1" title="Гепард">
<p>Beware of the leopard 1</p>
</div>
<div class="warning2">
<p>Beware of the leopard 2</p>
</div>
Есть ли возможность проверить значение если к примеру проверить title,если блок который нужно скрыть идет раньше чем блок который нужно проверить?
Такая возможность появилась относительно недавно, и позволяет это псевдокласс :has()
:
:root:has(.warning1:not([title="Леопард"])) .warning2 { display: none; }
<div class="warning2">
<p>Beware of the leopard 2</p>
</div>
<div class="warning3">
<p>Beware of the leopard 3</p>
</div>
<div class="warning4">
<p>Beware of the leopard 4</p>
</div>
<div class="warning1" title="Гепард">
<p>Beware of the leopard 1</p>
</div>
Псевдокласс :root
в этом примере указан только как замена общего родительского контейнера.