2

В приложении есть много страниц на которых div с классом playlist-playlist-playlistContentвнутри всегда есть div с классом main-actionBar-ActionBarRow и вот внутри него лишь на некоторых страницах есть

<button type="button" role="switch" aria-checked="true" aria-label="Удалить из медиатеки" class="main-addButton-button main-addButton-active" title="Удалить из медиатеки"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M27.319 5.927a7.445 7.445 0 00-10.02-.462s-.545.469-1.299.469c-.775 0-1.299-.469-1.299-.469a7.445 7.445 0 00-10.02 10.993l9.266 10.848a2.7 2.7 0 004.106 0l9.266-10.848a7.447 7.447 0 000-10.531z"></path></svg></button>

Нужно, что бы только в том случае, если есть эта кнопка - в css к .x-sortBox-sortDropdown добавлялось margin-right: 40px;

Подскажите пожалуйста, как это сделать. Возможно ли это сделать только при помощи CSS? Если нет, то как сделать на JS?

Весь HTML код main-actionBar-ActionBarRow в случае, когда эта кнопка есть:

<div class="main-actionBar-ActionBar contentSpacing">
  <div class="main-actionBar-ActionBarRow">
    <button class="main-playButton-PlayButton main-playButton-primary" aria-label="Слушать" style="--size:56px;"><svg height="28" role="img" width="28" viewBox="0 0 24 24" aria-hidden="true"><polygon points="21.57 12 5.98 3 5.98 21 21.57 12" fill="currentColor"></polygon></svg></button>
    <button type="button" role="switch" aria-checked="true" aria-label="Удалить из медиатеки" class="main-addButton-button main-addButton-active" title="Удалить из медиатеки"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M27.319 5.927a7.445 7.445 0 00-10.02-.462s-.545.469-1.299.469c-.775 0-1.299-.469-1.299-.469a7.445 7.445 0 00-10.02 10.993l9.266 10.848a2.7 2.7 0 004.106 0l9.266-10.848a7.447 7.447 0 000-10.531z"></path></svg></button>
    <button class="x-downloadButton-button" role="switch" aria-label="Скачать" aria-checked="false" title="Скачать"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M15.999 21.159V8h-1v13.148L10.46 15.87l-.758.652 5.8 6.744 5.819-6.744-.757-.653-4.565 5.29zM15.5 1C7.492 1 1 7.492 1 15.5S7.492 30 15.5 30 30 23.508 30 15.5 23.508 1 15.5 1zm0 28C8.056 29 2 22.944 2 15.5S8.056 2 15.5 2 29 8.056 29 15.5 22.944 29 15.5 29z"></path></svg></button>
    <button type="button" aria-haspopup="menu" aria-label="Еще" class="main-moreButton-button" title="Еще"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M5.998 13.999A2 2 0 105.999 18a2 2 0 00-.001-4zm10.001 0A2 2 0 1016 18a2 2 0 000-4zm10.001 0A2 2 0 1026.001 18 2 2 0 0026 14z"></path></svg></button>
    <div class="playlist-playlist-searchBoxContainer">
      <div class="x-filterBox-filterInputContainer" role="search"><input class="x-filterBox-filterInput" role="searchbox" maxlength="80" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Искать в плейлисте" aria-hidden="true" tabindex="-1" value="">
        <div class="x-filterBox-overlay"><span class="x-filterBox-searchIconContainer"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" aria-hidden="true" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></span></div>
        <button class="x-filterBox-expandButton" data-testid="expand-button" aria-hidden="false"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></button>
      </div>
      <button class="x-sortBox-sortDropdown" type="button" aria-expanded="false"><span class="main-type-mesto">Свой порядок</span><svg role="img" height="16" width="16" viewBox="0 0 16 16" class="Svg-ulyrgf-0 ghlXvf"><path d="M3 6l5 5.794L13 6z"></path></svg></button></div>
  </div>
</div>

1
  • Зачем в коде вопроса добавлять aria-label и другие подобные аттрибуты?
    – Dmytro
    14 июн 2021 в 17:49

2 ответа 2

4

:is(.b1~.div1) .b3 {
    color: red;
    background: lightgreen;
    margin: 10px;
}
<div class="div1">
  <button class="b3">Button 3</button>
</div>
<button class="b1">Button 1</button>
<button class="b2">Button 2</button>
<div class="div1">
  <button class="b3">Button 3</button>
</div>

1
  • не, ну Вы как всегда - по последним новинкам)
    – Dmytro
    14 июн 2021 в 18:23
1

#app {
  display: flex;
}

.block {
  margin: 24px;
}

.x-sortBox-sortDropdown {
  background-color: blue;
}

.main-addButton-button~.playlist-playlist-searchBoxContainer .x-sortBox-sortDropdown {
  background-color: red;
}
<div id="app">
  <div class="block">
    <div class="main-actionBar-ActionBar contentSpacing">
      <div class="main-actionBar-ActionBarRow">
        <button class="main-playButton-PlayButton main-playButton-primary" aria-label="Слушать" style="--size:56px;"><svg height="28" role="img" width="28" viewBox="0 0 24 24" aria-hidden="true"><polygon points="21.57 12 5.98 3 5.98 21 21.57 12" fill="currentColor"></polygon></svg></button>
        <button type="button" role="switch" aria-checked="true" aria-label="Удалить из медиатеки" class="main-addButton-button main-addButton-active" title="Удалить из медиатеки"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M27.319 5.927a7.445 7.445 0 00-10.02-.462s-.545.469-1.299.469c-.775 0-1.299-.469-1.299-.469a7.445 7.445 0 00-10.02 10.993l9.266 10.848a2.7 2.7 0 004.106 0l9.266-10.848a7.447 7.447 0 000-10.531z"></path></svg></button>
        <button class="x-downloadButton-button" role="switch" aria-label="Скачать" aria-checked="false" title="Скачать"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M15.999 21.159V8h-1v13.148L10.46 15.87l-.758.652 5.8 6.744 5.819-6.744-.757-.653-4.565 5.29zM15.5 1C7.492 1 1 7.492 1 15.5S7.492 30 15.5 30 30 23.508 30 15.5 23.508 1 15.5 1zm0 28C8.056 29 2 22.944 2 15.5S8.056 2 15.5 2 29 8.056 29 15.5 22.944 29 15.5 29z"></path></svg></button>
        <button type="button" aria-haspopup="menu" aria-label="Еще" class="main-moreButton-button" title="Еще"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M5.998 13.999A2 2 0 105.999 18a2 2 0 00-.001-4zm10.001 0A2 2 0 1016 18a2 2 0 000-4zm10.001 0A2 2 0 1026.001 18 2 2 0 0026 14z"></path></svg></button>
        <div class="playlist-playlist-searchBoxContainer">
          <div class="x-filterBox-filterInputContainer" role="search"><input class="x-filterBox-filterInput" role="searchbox" maxlength="80" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Искать в плейлисте" aria-hidden="true" tabindex="-1" value="">
            <div class="x-filterBox-overlay"><span class="x-filterBox-searchIconContainer"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" aria-hidden="true" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></span></div>
            <button class="x-filterBox-expandButton" data-testid="expand-button" aria-hidden="false"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></button>
          </div>
          <button class="x-sortBox-sortDropdown" type="button" aria-expanded="false"><span class="main-type-mesto">Свой порядок</span><svg role="img" height="16" width="16" viewBox="0 0 16 16" class="Svg-ulyrgf-0 ghlXvf"><path d="M3 6l5 5.794L13 6z"></path></svg></button></div>
      </div>
    </div>
  </div>

  <div class="block">
    <div class="main-actionBar-ActionBar contentSpacing">
      <div class="main-actionBar-ActionBarRow">
        <button class="main-playButton-PlayButton main-playButton-primary" aria-label="Слушать" style="--size:56px;"><svg height="28" role="img" width="28" viewBox="0 0 24 24" aria-hidden="true"><polygon points="21.57 12 5.98 3 5.98 21 21.57 12" fill="currentColor"></polygon></svg></button>
        <button class="x-downloadButton-button" role="switch" aria-label="Скачать" aria-checked="false" title="Скачать"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M15.999 21.159V8h-1v13.148L10.46 15.87l-.758.652 5.8 6.744 5.819-6.744-.757-.653-4.565 5.29zM15.5 1C7.492 1 1 7.492 1 15.5S7.492 30 15.5 30 30 23.508 30 15.5 23.508 1 15.5 1zm0 28C8.056 29 2 22.944 2 15.5S8.056 2 15.5 2 29 8.056 29 15.5 22.944 29 15.5 29z"></path></svg></button>
        <button type="button" aria-haspopup="menu" aria-label="Еще" class="main-moreButton-button" title="Еще"><svg role="img" height="32" width="32" viewBox="0 0 32 32" class="Svg-ulyrgf-0 ghlXvf"><path d="M5.998 13.999A2 2 0 105.999 18a2 2 0 00-.001-4zm10.001 0A2 2 0 1016 18a2 2 0 000-4zm10.001 0A2 2 0 1026.001 18 2 2 0 0026 14z"></path></svg></button>
        <div class="playlist-playlist-searchBoxContainer">
          <div class="x-filterBox-filterInputContainer" role="search"><input class="x-filterBox-filterInput" role="searchbox" maxlength="80" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Искать в плейлисте" aria-hidden="true" tabindex="-1" value="">
            <div class="x-filterBox-overlay"><span class="x-filterBox-searchIconContainer"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" aria-hidden="true" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></span></div>
            <button class="x-filterBox-expandButton" data-testid="expand-button" aria-hidden="false"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></button>
          </div>
          <button class="x-sortBox-sortDropdown" type="button" aria-expanded="false"><span class="main-type-mesto">Свой порядок</span><svg role="img" height="16" width="16" viewBox="0 0 16 16" class="Svg-ulyrgf-0 ghlXvf"><path d="M3 6l5 5.794L13 6z"></path></svg></button></div>
      </div>
    </div>
  </div>
</div>

1
  • Спасибо, то что нужно) 14 июн 2021 в 18:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.