Скрыть кнопку, как составить правильно стиль?

Question

[Grizar]

Помогите скрыть кнопку a.button.product_type_simple.ajax_add_to_cart
Имею такую разметку

<div>

<h2 class="woocommerce-loop-product__title">Коробочка Крафт с окном 100х80х30 мм</h2>
	<span class="price">
                        <span class="woocommerce-Price-amount amount">7.50&nbsp;
                                 <span class="woocommerce-Price-currencySymbol">грн   
                                 </span>
                         </span> 
                    <a class="outstock-text">Товар продан      </a>
         </span>
  <div class="desc_01_product">
                  <p>......</p>
    </div>
    <a href=" korobkamalokno/"  class="button product_type_simple ajax_add_to_cart" >Подробнее</a>

</div>

Нужно задействовать классы
.price
.outstock-text
a.button.product_type_simple.ajax_add_to_cart
т.е. мне нужно скрыть(чтобы стили сработали) а.батон при наличии price и outstock-text
Я делаю это так (ну и не только ) - не получается

span.price +.woocommerce-Price-amount.amount.outstock-text + .desc_01_product + a.button.product_type_simple.ajax_add_to_cart{
    display: none;
}
span.price>a + .desc_01_product + a.button.product_type_simple.ajax_add_to_cart {
   display: none;
}

разметка стандартная вукомерс, единственное чтоя вставил так это
<a class="outstock-text">Товар продан </a>
- помогите правильно написать стиль.

Comments

[xdevelx]

Для начала объясните, как блочный div оказался внутри инлайнового span?
.outstock-text находится внутри .price, поэтому никак, только если давать модификатор для price

.price--outstock .ajax_add_to_cart {
   display: none;
}

И наведите порядок в разметке - невалидная каша получается.

[Grizar]

xdevelx, чет не хочет работать , даже если span
https://jsfiddle.net/profy/jdan3guh/2/

[Grizar]

xdevelx, а разметка стандартная вукомерс, единственное чтоя вставил так это

<div class="outstock-text">Товар продан      </div>

[xdevelx]

Grizar, Так нужно давать модификатор .price--outstock при наличии outstock
<span class="price price--outstock">

разметка стандартная вукомерс, единственное чтоя вставил так это

блоки не могут быть внутри span

[xdevelx]

Grizar, Перечитайте мой первый комментарий - там все было написано, что нужно изменить разметку и даже позже привел пример, как сделать.

[Grizar]

xdevelx, перечитайте вопрос, у меня разметка такая какая есть, стандартная вукомерс, и ее я менять не могу, мне нужен стиль который бы работал в этой разметке , Я ЯСНО задал вопрос что нужен стиль для этой разметки
PS..

[xdevelx]

Grizar,

Я ЯСНО задал вопрос

А я ясно ответил еще в самом первом комментарии.

[Rustam Bainazarov]

CSS так не умеет, проблема в том, что .outstock-text внутри находится, а CSS наверх идти не умеет. Надо менять разметку (чтобы можно было использовать + или ~ селекторы) или с помощью JS cледить за наличием классов у нужных элементов.

[Grizar]

xdevelx, ок спасибо

Answer 1

[Арсений Матыцин]

У тебя элементы вложенные, но обращаешься ты к последующим на том же уровне. Тебе стоит уделить больше внимания селекторам и все получится.

И немного поменять уровни вложенности так как ты с помощью css можешь двигаться только «вниз» и «вглубь». А «всплывать» не умеет.

Т.е. тебе нужно расположить всю цепочку на одном уровне и через селектор + пройтись. Впрочем, я бы рекомендовал такие проверки делать на уровне бэка. Чтобы не вываливать наружу логику.

UPD глянул каменты. Менять разметку woocommerce ты можешь, ищи это в их документации. Ключевым словом должно быть «переопределение». И на самом деле это крутая сторона WP и хорошо спроектированных под него плагинов. Или делай проверку через. JS, ему пофиг на правила CSS о движении вниз и вглубь.

Answer 2

[Adik Izat]

Интересный вопрос, который сложно понять. Хз умеет ли это делать css, надо реализовывать через js.