Jak wykluczyć określoną nazwę klasy w selektorze CSS?

137

Próbuję zastosować kolor tła, gdy mysz użytkownika najedzie na element, którego nazwa klasy to "reMode_hover".

Ale nie chcę zmieniać koloru, jeśli element też ma"reMode_selected"

Uwaga: mogę używać tylko CSS, a nie javascript, ponieważ pracuję w jakimś ograniczonym środowisku.

Aby wyjaśnić, moim celem jest pokolorowanie pierwszego elementu po najechaniu myszą, ale nie drugiego.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Spróbowałem poniżej, mając nadzieję, że pierwsza definicja zadziała, ale tak nie jest. Co ja robię źle?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}
html css css-selectors Miauczeć
źródło

Odpowiedzi:

235

Jednym ze sposobów jest użycie selektora wielu klas (bez spacji, ponieważ jest to selektor podrzędny):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}
<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>
Rozwiń fragment

Pigułki wybuchowe
źródło
3
nie powinno być: .reMode_hover: not ('. reMode_selected'): hover Z mojego doświadczenia wynika, że ​​te cytaty są konieczne.
Makan Tayebi
1
@MakanTayebi Poruszasz doskonałą kwestię dotyczącą cytatów wokół selektora. TL; DR: Rzeczywiście najlepiej z nich korzystać. Dokładne wyjaśnienie na stackoverflow.com/a/5578880/1772379 .
Ben Johnson
Jest to ciągle aktualne? Nie próbowałem tego w innych przeglądarkach, ale w najnowszej wersji przeglądarki Firefox, w której pracuję, :notselektor działał tylko wtedy, gdy usunąłem cudzysłowy.
Alex Rummel
30

W nowoczesnych przeglądarkach możesz:

.reMode_hover:not(.reMode_selected):hover{}

Aby uzyskać informacje dotyczące zgodności, odwiedź witrynę http://caniuse.com/css-sel3 .

imsky
źródło
12

Metoda 1

Problem z kodem jest to, że są zaznaczając .remode_hover, że jest potomkiem z .remode_selected. Tak więc pierwszą częścią poprawnego działania kodu jest usunięcie tego miejsca

.reMode_selected.reMode_hover:hover

Następnie, aby styl nie działał, musisz zastąpić styl ustawiony przez :hover. Innymi słowy, musisz przeciwdziałać background-colornieruchomości. Więc ostateczny kod będzie

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

Skrzypce

Metoda 2

Alternatywną metodą byłoby użycie :not(), jak twierdzą inni. Spowoduje to zwrócenie dowolnego elementu, który nie ma klasy lub właściwości określonej w nawiasach. W takim przypadku umieściłbyś .remode_selectedtam. Będzie to dotyczyło wszystkich elementów, które nie mają klasy.remode_selected

Skrzypce

Nie polecałbym jednak tej metody, ponieważ została wprowadzona w CSS3, więc obsługa przeglądarek nie jest idealna.

Metoda 3

Trzecią metodą byłoby użycie jQuery. Możesz .not()ustawić kierowanie na selektor, który byłby podobny do używania :not()w CSS, ale z dużo lepszą obsługą przeglądarki

Skrzypce

Cody Guldner
źródło
4
Powinieneś usunąć swoją „Metodę 3”, która wspomina o jQuery, ponieważ OP wyraźnie powiedział „nie javascript” jako rozwiązanie.
ScottS