Некорректная работа псевдокласса :not

Question

Есть структура html типа

menu .item {
  color: green
}

menu>.block>[class~='rec']:not([class~='mark'])>.item {
  color: black
}

<menu>


  <div class='block'>

    <div class='rec'>
      <a class='item' href='df'>dddd</a> //black
    </div>

    <div class='rec'>

      <a class='item' href='/remont/'>ssss</a> //black - должно быть green


      <div class='block'>

        <div class='rec mark'>
          <a class='item' href='df'>dddd</a> //green
        </div>

      </div>

    </div>


  </div>


</menu>

Что не так? По моей логике 2 и 3 элементы должны быть зелеными, но зеленый только 3, будто не исполняется условие :not([class~='mark'])

ставлю вместо

 :not([class~='mark'])

вот это, например

:not([class~='block'])

Все корректно отображается (color=black)

Answer 1

У меня наоборот, вы ошиблись с синтаксисом, скорее всего

el .item {
  color:green;
}

el > .block > [class~='rec']:not([class~='mark']) > .item {
  color:black;
}

<el>


        <div class='block'>

           <div class='rec'>
             <a class='item' href='df'>dddd</a>
           </div> 

           <div class='rec'>
]
             <a class='item' href='/remont/'>ssss</a>
           
            
             <div class='block'>

                 <div class='rec mark'>
                    <a class='item' href='df'>dddd</a> 
                 </div> 
            
             </div>
            
          </div>

       
        </div>

Answer 2

Не совсем понимаю почему просто через класс не выбирать.

.rec .item{
  color: black;
}

.rec.mark .item{
  color: green;
}

<menu>
  <div class='block'>
    <div class='rec'>
      <a class='item' href='df'>dddd</a> //black
    </div>
    <div class='rec mark'>
      <a class='item' href='/remont/'>ssss</a> //black - должно быть green
      <div class='block'>
        <div class='rec mark'>
          <a class='item' href='df'>dddd</a> //green
        </div>
      </div>
    </div>
  </div>
</menu>

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

menu .item {
  color: green
}

menu>.block>[class~='rec']:not([class~='mark'])>.item {
  color: black
}

<menu> //menu>.block>[class~='rec']:not([class~='mark'])>.item
  <div class='block'> // выбрали только этот элемент так как стоит комбинатор > после menu
    <div class='rec'> // выбрали этот элемент так как в нем нет класа mark
      <a class='item' href='df'>dddd</a> // применили цвет так как указан комбинатор >
    </div>
    <div class='rec'> // выбрали этот элемент так как в нем нет класа mark
      <a class='item' href='/remont/'>ssss</a> // применили цвет так как указан комбинатор >
      <div class='block'> // стили не применяются так как блок не прямой потомок menu
        <div class='rec mark'>
          <a class='item' href='df'>dddd</a> // стили по умолчанию
        </div>
      </div>
    </div>
  </div>
</menu>

БЛОГ НА HUSL

Некорректная работа псевдокласса :not

Ответы (2 шт):