Чи може псевдоклас: не () мати декілька аргументів?

746

Я намагаюся вибрати inputелементи всіх types, крім radioі checkbox.

Багато людей показали, що ви можете поставити декілька аргументів :not, але використання type, здається, не працює, я намагаюся це зробити.

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

Будь-які ідеї?

css css-selectors

— дельфі
джерело

24

"Багато людей показали, що ви можете навести декілька аргументів: не" Або ті люди цитували певну статтю, на яку посилаються в народі, але вводять в оману, або вони говорили про jQuery, а не про CSS. Зауважте, що даний селектор насправді дійсний у jQuery, але не у CSS. Я написав запитання і відповіді, де детально розглядаються відмінності: stackoverflow.com/questions/10711730/… (у відповіді також згадується ця стаття збоку)

— BoltClock

10

Вітаємо! Ви успішно написали дійсний CSS4.0 у своєму прикладі за 2 роки до виходу офіційного видання.

— Джек Гіффін

1

@Jack Giffin: Яке "офіційне видання" ви маєте на увазі? Це питання заздалегідь датує FPWD селекторів-4 на 5 місяців, і специфікація ще ніде не завершена: w3.org/TR/2011/WD-selectors4-20110929/#negation І це заздалегідь датує першу реалізацію 4 з половиною роки : stackoverflow.com/questions/35993727 / ...

— BoltClock

1536

Чому: не просто використовувати два :not:

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

_{Так, це навмисно}

— Фелікс Клінг
джерело

4

Це має високу специфіку.

— Недистракція

63

Для тих, хто не отримує гумору: він сказав "чому б не ..." з :персонажем.

— totymedli

11

Як зауваження, якщо ви робите щось на кшталт, input:not('.c1'), input:not('c2')ви потрапляєте в ситуацію "і", коли обидва класи повинні бути вхідними для того, щоб вони відповідали.

— Cloudkiller

3

@BoltClock Затримка, але, отже, і бажання :not([attr],[attr])формату CSV :-P

— TylerH

3

@Cloudkiller немає, який вибрав би будь-який елемент введення -> "введення без класу c1 АБО введення без класу c2"

— Девід

48

Якщо ви використовуєте SASS у своєму проекті, я створив цей міксин, щоб він працював так, як ми всі хочемо:

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

його можна використовувати двома способами:

Варіант 1: список ігнорованих елементів у рядку

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

Варіант 2: спочатку перерахуйте ігноровані елементи у змінній

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

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

Виводиться CSS для будь-якого варіанта

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

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}

— Деніел Тонон
джерело

6

Хіба це не так, як просити лесоруба зайти до магазину господарських товарів, а не дістати його дрова?

— osirisgothra

Що? так що ви краще пишете .selector: not (.one): not (.two): not (.three): not (.four) {...} ніж .selector {@include not ('. one', ' .two ','. три ','. чотири ') {...}}?

— Даніель Тонон

2

З точки зору ефективності: так. Шлях менше 'символів та більш ефективний код.

— Даан

:not()= 6 символів на предмет; '',= 3 символи на елемент. @includeслід призначити гарячу клавішу, тому я буду рахувати це як один символ (з точки зору його введення). Технічно я не думаю, що вам навіть не потрібно використовувати єдині цитати в списку, якщо ви їх так ненавидите. Вони допомагають запобігти видавці редакторів. Виходячи з цього, я все ще думаю, що мій спосіб - це більш ефективний спосіб набору тексту.

— Даніель Тонон

2

@DaanHeskes також, що написання всіх випадків: not () не дозволяє використовувати змінну для їх переліку.

— plong0

30

Починаючи з селекторів CSS 4 з використанням декількох аргументів у :notселекторі стає можливим ( див. Тут ).

У CSS3 селектор: not дозволює лише 1 селектор як аргумент. У селекторах рівня 4 він може взяти список аргументів як аргумент.

Приклад:

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

На жаль, підтримка браузера обмежена . Наразі це працює лише в Safari.

— Пітер Мейерсон
джерело

3

За даними caniuse.com , це все ще підтримується лише Safari

— slanden

8

Майте на увазі його CSS селектори рівня 4, а не CSS 4, немає такого поняття, як CSS 4, і, ймовірно, він ніколи не буде існувати.

— Edu Ruiz

8

У мене були проблеми з цим, і метод "X: не (): не ()" не працював для мене.

Я врешті-решт вдався до цієї стратегії:

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

Це майже не так весело, але для мене це спрацювало, коли: не () було нахабним. Це не ідеально, але суцільно.

— їжтекасерол
джерело

5

Якщо ви встановите плагін "cssnext" Post CSS , ви можете сміливо почати використовувати синтаксис, який ви хочете використовувати прямо зараз.

Використання cssnext перетворить це:

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

У це:

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

http://cssnext.io/features/#not-pseudo-class

— Деніел Тонон
джерело