태그 보관물: css-selectors

css-selectors

: not () 의사 클래스에 여러 개의 인수가있을 수 있습니까? :not주었지만 사용 type하는 것이 어쨌든

나는 선택하기 위해 노력하고있어 input모든 요소 type를 제외들 radio과 checkbox.

많은 사람들이에 여러 개의 인수를 넣을 수 있음을 보여 :not주었지만 사용 type하는 것이 어쨌든 작동하지 않는 것 같습니다.

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

어떤 아이디어?

답변

왜 : 두 가지만 사용하지 마십시오 :not.

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

네, 의도적입니다

답변

프로젝트에서 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*/
}

답변

선택기에서 여러 인수를 사용하여 CSS 선택기 4부터 시작할 :not수 있습니다 ( 여기 참조 ).

CSS3에서 : not selector는 하나의 selector 만 인수로 허용합니다. 레벨 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에서만 작동합니다.

답변

이 문제가 발생하여 “X : not () : not ()”메서드가 작동하지 않았습니다.

나는이 전략에 의지했다.

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

그것은 거의 재미가 없지만 : not ()이 pugnacious되었을 때 저에게 효과적이었습니다. 이상적이지는 않지만 견고합니다.

답변

“cssnext”Post CSS plugin 을 설치하면 지금 사용하려는 구문을 사용하여 안전하게 시작할 수 있습니다.

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

답변