Kann die Pseudoklasse: not () mehrere Argumente haben?

746

Ich versuche inputElemente aller types außer radiound auszuwählen checkbox.

Viele Leute haben gezeigt, dass man mehrere Argumente einfügen kann :not, aber die Verwendung typescheint sowieso nicht zu funktionieren. Ich versuche es.

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

Irgendwelche Ideen?

Delphi
quelle
24
"Viele Leute haben gezeigt, dass man mehrere Argumente einbringen kann: nicht" Entweder zitierten diese Leute einen bestimmten Artikel, auf den im Volksmund verwiesen wird, der jedoch stark irreführend ist, oder sie sprachen über jQuery, nicht über CSS. Beachten Sie, dass der angegebene Selektor tatsächlich in jQuery gültig ist, jedoch nicht in CSS. Ich schrieb ein Q & A, in dem die Unterschiede detailliert beschrieben wurden: stackoverflow.com/questions/10711730/… (in der Antwort wird auch der Artikel auf der Seite erwähnt)
BoltClock
10
Herzliche Glückwünsche! Sie haben in Ihrem Beispiel über 2 Jahre vor Erscheinen der offiziellen Ausgabe erfolgreich gültiges CSS4.0 geschrieben.
Jack Giffin
1
@ Jack Giffin: Auf welche "offizielle Ausgabe" beziehen Sie sich? Diese Frage datiert die FPWD von Selektoren-4 nur um 5 Monate vor, und die Spezifikation ist noch lange nicht abgeschlossen: w3.org/TR/2011/WD-selectors4-20110929/#negation Und sie datiert die erste Implementierung von vor 4 ½ Jahre : stackoverflow.com/questions/35993727/…
BoltClock

Antworten:

1537

Warum: nicht nur zwei verwenden :not:

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

Ja, das ist beabsichtigt

Felix Kling
quelle
4
Dies hat eine hohe Spezifität.
Undistraction
63
Für diejenigen, die den Humor nicht verstehen: Er sagte "Warum nicht ..." mit der :Figur.
Totymedli
11
Nebenbei bemerkt, wenn Sie so etwas tun, kommt input:not('.c1'), input:not('c2')es zu einer "und" Situation, in der beide Klassen auf der Eingabe stehen müssten, damit sie übereinstimmen.
Cloudkiller
3
@ BoltClock verzögert, aber daher auch der Wunsch nach dem :not([attr],[attr])CSV-Format :-P
TylerH
3
@Cloudkiller nein, das würde ein Eingabeelement auswählen -> "Eingabe ohne die Klasse c1 ODER Eingabe ohne die Klasse c2"
David Callanan
48

Wenn Sie SASS in Ihrem Projekt verwenden, habe ich dieses Mixin erstellt, damit es so funktioniert, wie wir es alle wollen:

@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;
    }
}

Es kann auf zwei Arten verwendet werden:

Option 1: Listen Sie die ignorierten Elemente inline auf

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

Option 2: Listen Sie zuerst die ignorierten Elemente in einer Variablen auf

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

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

Ausgegebenes CSS für beide Optionen

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

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}
Daniel Tonon
quelle
6
Ist das nicht so, als würde man einen Holzfäller bitten, stattdessen zum Baumarkt zu gehen, um sein Holz zu holen?
Osirisgothra
Was? Sie schreiben also lieber .selector: not (.one): not (.two): not (.three): not (.four) {...} als .selector {@include not ('. one', ' .zwei drei vier') { ... } } ?
Daniel Tonon
2
In Bezug auf die Effizienz: ja. Viel weniger 'Zeichen und imo effizienterer Code.
Daan
:not()= 6 Zeichen pro Artikel; '',= 3 Zeichen pro Artikel. @includesollte einem Hotkey zugewiesen werden, damit ich das als ein Zeichen zählen kann (in Bezug auf die Eingabe). Technisch gesehen glaube ich nicht, dass Sie die einfachen Anführungszeichen in der Liste verwenden müssen, wenn Sie sie so sehr hassen. Sie verhindern jedoch, dass Redakteure ausflippen. Auf dieser Grundlage denke ich immer noch, dass mein Weg der effizientere Typ ist, ihn zu schreiben.
Daniel Tonon
2
@DaanHeskes auch, dass Sie beim Schreiben aller: not () -Fälle keine Variable verwenden können, um sie aufzulisten.
plong0
30

Ab CSS Selectors 4 wird die Verwendung mehrerer Argumente im :notSelektor möglich ( siehe hier ).

In CSS3 erlaubt der Selektor: not nur 1 Selektor als Argument. In Selektoren der Ebene 4 kann eine Selektorliste als Argument verwendet werden.

Beispiel:

/* 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;
}

Leider ist die Browserunterstützung begrenzt . Im Moment funktioniert es nur in Safari.

Pieter Meiresone
quelle
3
Laut caniuse.com wird es immer noch nur von Safari
Slanden am
8
Denken Sie daran, dass es sich um CSS-Selektoren der Stufe 4 handelt, nicht um CSS 4. Es gibt kein CSS 4 und es wird wahrscheinlich nie existieren.
Edu Ruiz
8

Ich hatte einige Probleme damit und die Methode "X: not (): not ()" funktionierte bei mir nicht.

Am Ende habe ich auf diese Strategie zurückgegriffen:

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

Es ist bei weitem nicht so lustig, aber es hat bei mir funktioniert, als: not () kämpferisch war. Es ist nicht ideal, aber es ist solide.

eatCasserole
quelle