1 Тема від Yola

  • Yola
  • Yola
  • Replace Group
  • На форумі
  • Звідки: ukrainian.stackexchange.com
  • Дата реєстрації: 16.04.2013
  • Повідомлень: 1 212
    • Репутація: 615

Тема: Як працюють > і :not()

Намагаюсь зробити сторінкувач. Не виходить, щоб коли нависаєш над disabled і active page-item'амі колір не мінявся.

<style>
.pagination {
    display: flex;
    list-style: none;
    border-radius: 0.25rem;
}
    .pagination > .page-item {
        display: inline-block;
    }
    .pagination > .page-item > .page-btn {
        border: 1px solid red;
    }
    .pagination > .page-item > .page-btn:hover:not(:disabled):not(:active) {
        background-color: green;
    }
    .pagination > .page-item.active > .page-btn {
        background-color: blue;
        color: white;
    }
    .pagination > .page-item.disabled > .page-btn{
        border: 0px;
    }
</style>

<ul class="pagination">
  <li class="page-item disabled"><button class="page-btn">prev</button></li>
  <li class="page-item active"><button class="page-btn">0</button></li>
  <li class="page-item disabled"><button class="page-btn">...</button></li>
  <li class="page-item"><button class="page-btn">9</button></li>
  <li class="page-item"><button class="page-btn">next</button></li>
</ul>

https://jsfiddle.net/Harmyder/62ymnkoa/

Yola вебсайт

2 Відповідь від dot Востаннє редагувалося dot (14.09.2020 02:44:13)

  • dot
  • dot
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 02.09.2017
  • Повідомлень: 934
    • Репутація: 489

Re: Як працюють > і :not()

Natce vjso prosto i robe:

.pagination > .page-item:not(.disabled):not(.active) > .page-btn:hover {
    background-color: green;
}

Jak?

– Dvokrapky vidpovidajutj za (Anql.) psevdoklas, dekotri z nyx tut uge je jak :not i :hover, a disabled i active je zvytcnymy klasamy. Tak, posered psevdoklasiv je :active i (Anql.) :disable, ale vony ne dlja tsjoho i pratsjujutj hyncym tcynom, do toho g psevdoklasy za dokumentatsijoju (Anql.) :not ne robjatj nijak.

– Filtrujemo ne posered klasu page-btn, a page-item, za kotrym vrivenj stojatj klasy disabled i active. No i za toju g dokumentatsijoju :not ne rozhljadaje predkiv.

Подякували: Yola, koala, leofun013

dot вебсайт

3 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 601
    • Репутація: 13310

Re: Як працюють > і :not()

Не побачив у dot відповіді на перше питання - "як працює >". Дуже просто: лише тоді, коли елемент праворуч є безпосереднім нащадком (child) елементу ліворуч. 

.pagination > .page-item

означає "всі елементи з класом "page-item", що розташовані безпосередньо в елементі з класом "pagination". Скажімо,

<ul class="pagination">
  <div>
    <li class="page-item disabled">...
    </li>
  </div>
</ul>

уже б не підпадало під дію цього правила.

Подякували: Yola1

koala вебсайт