Czy istnieje selektor CSS nie równa się?

116

Czy istnieje coś takiego jak! = (Nierówne) w CSS? np. mam następujący kod:

input {
 ... 
 ...
}

ale dla niektórych wejść muszę to unieważnić. Chciałbym to zrobić dodając klasę „reset” do tagu wejściowego, np

<input class="reset" ... />

a następnie po prostu pomiń ten tag z CSS.

Jak mogę to zrobić?

Jedynym sposobem, jaki widzę, byłoby dodanie klasy do tagu wejściowego i przepisanie CSS w następujący sposób:

input.mod {
 ...
 ...
}
Alex Ivasyuv
źródło
Myślę, że odpowiedziałeś na swoje pytanie. Umieść styl w input.mod i dodaj klasę „mod” do żądanego znacznika wejściowego.
Nazmul

Odpowiedzi:

157

W CSS3 możesz użyć :not()filtru, ale nie wszystkie przeglądarki jeszcze w pełni obsługują CSS3, więc upewnij się, że wiesz, co robisz, co jest teraz obsługiwane przez wszystkie główne przeglądarki (i jest od dłuższego czasu; to stara odpowiedź ...).

Przykład:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

i CSS

input:not(.avoidme) { background-color: green; }

Uwaga: to obejście nie powinno już być konieczne; Zostawiam to tutaj dla kontekstu.

Jeśli nie chcesz używać CSS3, możesz ustawić styl dla wszystkich elementów, a następnie zresetować go za pomocą klasy.

input { background-color: green; }
input.avoidme { background-color: white; }
Tomas Aschan
źródło
OMG ... wiedziałem, że istnieje :) Tak, jest! Dzięki.
Alex Ivasyuv
2
Brakuje wsparcia głównie w IE8 (i starszych wersjach). Jeśli ktoś jest zainteresowany polyfillem: selectivizr.com
franzlorenzon
1
@Guru: Możesz łączyć wiele :not()selektorów: input:not(.avoidme):not(.avoidmetoo)uniknie elementów z każdą klasą, input:not(.avoidme.andme)uniknie elementów z obiema klasami.
Tomas Aschan
1
@TomasLycken, faktycznie, używając wielu selektorów jest kłopotliwe w CSS, np :not(.this.that) { }praca może, ale jeśli coś takiego jak :not(.this, .that) { }będziesz spadać w dół, trzeba ŁAŃCUCHOWEGO nich, takie jak: :not(.this):not(.that). Rozumiem, że prawdopodobnie to wiesz, staram się pomóc przyszłym czytelnikom :)
Can O 'Spam
1
Pozostawienie tutaj komentarza dla przyszłych czytelników: Komentarz @SamSwift 웃 jest nadal aktualny, ale obsługa list (być może) pojawi się w przyszłości . Na razie jednak obsługiwane są tylko pojedyncze selektory :not().
Tomas Aschan
24

Możesz to również zrobić, „cofając” zmiany w klasie resetowania tylko w CSS.

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}
AvatarKava
źródło
8

CSS3 ma :not(), ale nie jest jeszcze zaimplementowany we wszystkich przeglądarkach. Jest jednak zaimplementowany w wersji zapoznawczej platformy IE9.

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

W międzyczasie będziesz musiał trzymać się staromodnych metod.

Andy E.
źródło
6

Możesz również podejść do tego, kierując na atrybut taki jak ten:

input:not([type=checkbox]){ width:100%; }

W tym przypadku wszystkie dane wejściowe, które nie są typu „pole wyboru”, będą miały szerokość 100%.

Dylan Auty
źródło
4

Ciekawe właśnie wypróbowałem to do wyboru elementu DOM za pomocą JQuery i działa! :)

$("input[class!='bad_class']");

Ta strona zawiera 168 elementów div, które nie mają klasy „comment-copy”

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
Naveed
źródło
11
[attr!="value"]jest selektorem tylko dla jQuery api.jquery.com/attribute-not-equal-selector
xec
Co to ma wspólnego z CSS?
devlin carnate
Selektory „CSS” @devlincarnate przeniknęły do ​​JS ( około 2013 r. ), więc ludzie go szukają.
Nick T
0

zamiast class = "reset" możesz odwrócić logikę, ustawiając class = "valid" Możesz dodać to domyślnie i usunąć klasę, aby zresetować styl.

Więc z twojego przykładu i Tomasa

input.valid {
 ... 
 ...
}

i

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>
Qazzian
źródło
2
Myślę, że cała idea możliwości „resetowania” przez zastosowanie do klasy polegała na tym, że liczba elementów, które nie powinny mieć stylu domyślnego, znacznie przekraczała te, które powinny, więc OP nie chciał zastosować żadnej klasy do większość elementów.
Tomas Aschan