Czy pseudo-klasa: not () może mieć wiele argumentów?

746

Próbuję wybrać inputelementy wszystkich typez wyjątkiem radioi checkbox.

Wiele osób pokazało, że możesz włożyć wiele argumentów :not, ale używanie typewydaje się nie działać, mimo to próbuję.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Jakieś pomysły?

css css-selectors delphi
źródło
24
„Wiele osób pokazało, że można włożyć wiele argumentów: nie” Albo ci ludzie cytowali pewien artykuł, do którego powszechnie się odwołuje, ale jest bardzo mylący, albo mówili o jQuery, a nie CSS. Zauważ, że dany selektor jest w rzeczywistości poprawny w jQuery, ale nie w CSS. Napisałem pytanie i szczegółowo wyszczególniające różnice: stackoverflow.com/questions/10711730/… (w odpowiedzi wspomniano również ten artykuł z boku)
BoltClock
10
Gratulacje! Z powodzeniem napisałeś prawidłowy CSS4.0 w swoim przykładzie ponad 2 lata przed wydaniem oficjalnej edycji.
Jack Giffin
1
@Jack Giffin: Do jakiego „oficjalnego wydania” masz na myśli? To pytanie poprzedza datę FPWD selektorów-4 o 5 miesięcy, a specyfikacja wciąż nie jest jeszcze ukończona: w3.org/TR/2011/WD-selectors4-20110929/#negation I poprzedza pierwszą implementację przez 4 i pół roku : stackoverflow.com/questions/35993727/...
BoltClock

Odpowiedzi:

1536

Dlaczego: nie używaj tylko dwóch :not:

input:not([type="radio"]):not([type="checkbox"])

Tak, to celowe

Felix Kling
źródło
4
Ma to wysoką swoistość.
Brak uwagi
63
Dla tych, którzy nie mają humoru: powiedział z :postacią „Dlaczego nie ...” .
totymedli
11
Na marginesie, jeśli robisz coś takiego input:not('.c1'), input:not('c2'), kończysz się sytuacją „i”, w której obie klasy musiałyby być na wejściu, aby to pasowało.
Cloudkiller
3
@BoltClock opóźniony, ale stąd też pragnienie :not([attr],[attr])formatu CSV :-P
TylerH
3
@Cloudkiller nie, który wybrałby dowolny element wejściowy -> „wejście bez klasy c1 LUB wejście bez klasy c2”
David Callanan
48

Jeśli używasz SASS w swoim projekcie, zbudowałem ten mixin, aby działał tak, jak wszyscy tego chcemy:

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

można go używać na 2 sposoby:

Opcja 1: umieść w liście zignorowane elementy

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

Opcja 2: najpierw wypisz zignorowane elementy w zmiennej

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

Wygenerowano CSS dla każdej opcji

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}
Daniel Tonon
źródło
6
czy to nie jest tak, jakby poprosić drwala, by poszedł do sklepu z narzędziami zamiast po drewno?
osirisgothra
Co? więc wolisz napisać .selector: not (.one): not (.two): not (.three): not (.four) {...} niż .selector {@include not ('. one', ' .dwa trzy cztery') { ... } } ?
Daniel Tonon
2
Pod względem wydajności: tak. Znacznie mniej 'znaków i imo bardziej wydajny kod.
Daan
:not()= 6 znaków na sztukę; '',= 3 znaki na element. @includepowinien być przypisany do klawisza skrótu, więc liczę go jako jeden znak (pod względem pisania). Technicznie rzecz biorąc, nie sądzę, abyś używał pojedynczych cudzysłowów na liście, jeśli tak bardzo ich nienawidzisz. Pomagają jednak w uniknięciu wariacji redaktorów. W związku z tym nadal uważam, że moim sposobem jest bardziej efektywny sposób pisania na klawiaturze.
Daniel Tonon
2
@DaanHeskes również, że wypisanie wszystkich przypadków: not () nie pozwala na użycie zmiennej do ich wyświetlenia.
plong0
30

Począwszy od selektorów CSS 4 przy użyciu wielu argumentów w :notselektorze staje się możliwe ( patrz tutaj ).

W CSS3 opcja: nie selektor dopuszcza tylko 1 selektor jako argument. W selektorach poziomu 4 może przyjmować listę selektorów jako argument.

Przykład: 

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

Niestety obsługa przeglądarki jest ograniczona . Na razie działa tylko w Safari.

Pieter Meiresone
źródło
3
według caniuse.com , wciąż jest obsługiwany tylko przez Safari
slanden
8
Pamiętaj, że jego CSS Selecters Level 4, a nie CSS 4, nie ma czegoś takiego jak CSS 4 i prawdopodobnie nigdy nie będzie istniał.
Edu Ruiz,
8

Miałem z tym pewne problemy, a metoda „X: not (): not ()” nie działała dla mnie.

Skończyło się na tym, że zastosowałem tę strategię:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

To nie jest prawie tak zabawne, ale zadziałało dla mnie, gdy: not () był zadziorny. Nie jest idealny, ale jest solidny.

eatCasserole
źródło