[css3] :not 선택자

 

 

[css3] :not 선택자

 

추석 연휴 잘 보내셨는지요 ^^

 

오랫동안 쉬어서, 다시 일을 손에 잡기가 쉽지 않지요...

 

그래서 오늘은 워밍업하는 기분으로 가볍게 시작하려고 해요. ^_^

 

 

오늘은 가상 클래스 중 부정 가상 클래스 :not() 선택자를 알아 보겠습니다

 

 

 

 

 

E:not(s)

 

E는 요소명, (s)는 선택자 입니다.

 

s에는 다른 부정선택자나,  가상 요소를 넣을 수 없습니다.

 

 

문법

 

:not(선택자){ 속성: 속성값;}

 

 

 

▶예

 

:not(p) { color: red; }

 

p가 아닌 곳은 모두 빨간색 글씨로 하라는 뜻

 

▶예 2

 

p:not(.choo) { color: red; }

 

클래스명 choo 가 아닌 p는 모두 빨간색 글씨로 하라는 뜻

 

 

css 스타일 적용 우선 순위를 계산할 때

 

:not 가상 클래스의 특정도 값은 (s)의 특정도 값입니다.

 

다른 가상 클래스와 다르게 :not 가상 클래스는, 특정도 값 계산에 추가되지 않습니다 (아래 글 참조)

 

스타일 적용 우선 순위와 속성 강제 적용 !important

 

#x34y           /* a=1 b=0 c=0 -> 특정도값 = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> 특정도값 = 101 */

 

 
:not() 선택자 브라우저 지원정보

 

ie 9+, chrome 4.0+, firefox 3.5+, opera 9.6+, safari 3.2+

 

 

실제 적용 예를 보겠습니다~

 

 

html

<h3>애국가</h3> <p>동해물과 백두산이 마르고 닳도록  하느님이 보우하사 우리나라 만세.</p> <p>남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세.</p> <p>가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편 단심일세.</p> <p>이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세.</p> <p class="red">후렴 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세.</p>

 

 

css

p.red{background-color:yellow;} p:not(.red){color:green;}

 

 

▶ 실행화면입니다

 

클래스명 .red로 된 p 요소에는 모두 배경색이 노란색으로

클래스명 .red가 아닌 p 요소는 모두 녹색 글자색으로 표시됩니다. 

 

 

 

 

  참조: https://developer.mozilla.org/en-US/docs/Web/CSS/:not