Проверка значения 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 шт):

Автор решения: UModeL

Да, проверить содержимое 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 в этом примере указан только как замена общего родительского контейнера.

→ Ссылка