CSS "and"및 "or"


113

일부 입력 유형을 스타일링하여 분석해야하기 때문에 상당히 큰 문제가 있습니다. 나는 다음과 같은 것을 가지고 있었다.

.registration_form_right input:not([type="radio")
{
 //Nah.
}

하지만 체크 박스에 스타일을 지정하고 싶지도 않습니다.

난 노력 했어:

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

사용하는 방법 &&? 그리고 ||조만간 사용해야하는데 사용법도 같을 것 같아요.

업데이트 :
난 아직도 사용하는 방법을 알고하지 않습니다 ||&&올바르게. W3 문서에서 아무것도 찾을 수 없습니다.


17
"해부" Yikes. 신의 징벌로 체크 박스를 스타일링하려는 사람들을 위협하고 싶습니까? (예 : "스타일링 규칙에서 일부 입력 유형을 제외해야합니다."와 같이 "면제"또는 이와 유사한 의미 일 것입니다.)
TJ Crowder

3
글쎄, 난 동사 내 언어에서 phrasal 좋은 번역을 찾을 수 없습니다)
Misiur

4
나는 @TJ Crowder가 아마 그것을 이해했다고 생각합니다. 하지만 했다 ... 재미 자신의 철자가 '신'의 특히 아이러니 D =
다윗은 분석 재개 모니카 말한다

그래도 훌륭한 ngram . ; ^)
ruffin

답변:


141

&& 여러 선택기를 함께 묶어 작동합니다.

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

다른 예시:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| 여러 선택기를 쉼표로 구분하여 작동합니다.

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

1
좋아, 빛 고마워. 나는 스타일링 양식을 싫어하지만 그것은 내 작업이고 사이트는 내 것이 아닙니다. 입력에 클래스를 적용하겠습니다.
Misiur

5
다음은 Internet Explorer가 지원하는 유용한 차트입니다. msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee

12
누가 :) 이제 IE를 사용
Tarun

2
notIE9부터 작동하는 것 같습니다 (@geofflee에서 제공 한 차트 덕분에).
SharpC

1
2018 년에 IE의 이전 버전을 지원하는 데 여전히 관심이 있습니까? 마이크로 소프트도 그렇다.
Anomaly

48

그리고 ( &&) :

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

또는 ( ||) :

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

아니, 실패도. 1 대 2 및 2 대 1 적용
Misiur

@KennyTM :보세요. 쉼표를 사용하면 다음과 같은 작업이 수행됩니다. .registration_form_right input : not ([type = "radio"])은 확인란을 포함한 모든 항목에 적용되고 .registration_form_right input : not ([type = "checkbox"])는 다음을 포함한 모든 항목에 적용됩니다. 라디오
Misiur

@Misiur : 물론입니다. 두 번째는 "OR"(일명 ||) 케이스입니다. 명확히하기 위해 업데이트되었습니다.
kennytm

1
@KennyTM : Misiur가 말하려는 것은 ... "||" 예제는 구문 상 정확하지만 표현식을 단순화하면 두 선택 자의 합집합에 모든 입력이 포함되므로 ".registration_form_right input"이됩니다.
geofflee

@geo, @Mis :보세요, 질문 은 "곧 ||을 사용해야합니다."라는 질문을 받았 으므로 이것은 ||예제 를 구성하는 방법 입니다. 물론 .registration_form_right input단순화 후 가 되지만 본질은 as 를 사용하는 ,|| 입니다. input:not([type="radio"]), input:not([name="foo"])사소하지 않은 예를 사용할 수 있습니다 .
kennytm

16

요소 의 속성 aAND 를 선택하려면 :bX

X[a][b]

요소 의 속성 a또는 속성을 선택하려면 :bX

X[a],X[b]

4

:not의사 - 클래스는 IE에서 지원하지 않습니다. 대신 이와 같은 것을 얻었습니다.

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

일부 중복되지만 더 높은 호환성을 위해 지불하는 것은 적은 비용입니다.


2

& 및 : not을 사용하여 "OR"의 동작을 어떻게 든 재현 할 수 있습니다.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

2
죄송합니다. : not (: not)은 유효한 CSS 구문이 아닙니다. 그래도 jQuery와 함께 작동합니다.
Serge Profafilecebook 2014 년

1

더 많은 선택자를 작성하고 쉼표로 나누는 것을 싫어합니까?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

그리고 BTW이

not([type="radio" && type="checkbox"])  

"이 두 가지 유형이없는 입력"처럼 보입니다. :)


2
첫 번째 선택자는 모든 non-를 선택하고 radio(그러나 선택하면 checkbox) 두 번째 선택자는 그 반대를 수행하므로 작동하지 않습니다. 이 둘의 합집합에는 checkbox radio .
에릭

첫 번째 예제는 && 함께 사용하지 않습니다. 첫 번째 선택기의 라디오가 아닌 입력과 확인란이 아닌 입력에 대해 실행됩니다. 즉, 모든 입력을 의미합니다. :-)
Dan F

네가 틀렸어. 그런 다음 첫 번째는 두 번째에 적용되고 두 번째는 첫 번째에 적용됩니다.
Misiur

1

만약 누군가가 나처럼 붙어 있다면. 포스트와 약간의 타격과 재판을 거친 후에 이것은 나를 위해 일했습니다.

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

1

주의의 한마디. 여러 not선택자를 함께 연결 하면 결과 선택 자의 특이성이 높아져 재정의하기가 더 어려워집니다. 기본적으로 모든 선택자가 포함 된 선택기를 찾아 새 선택기에 복사하여 붙여 넣어야합니다.

not(X or Y)선택은 특이성을 팽창 피하기 위해 좋은 것입니다,하지만 난에처럼 반대를 조합에 우리가 스틱해야합니다 추측 이 답변 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.