[CSS3] 특정 스타일을 무시하고 스타일을 적용하는 방법 - not()

CSS작업을 하다 보면 예상과 다르게 뒤에 나오는 스타일이 무시가 되거나 특정 스타일을 빼고 스타일을 넣어야 하는 경우가 종종 있습니다.

 

이럴 때는 'not()'선택자를 이용하여 지정한 스타일을 무시할 수 있습니다.

(참고 : W3C - CSS/Selectors/pseudo-classes/:not)

 

 

1. 샘플 만들기

일단 테이블을 하나 만들어 봅시다.

<table class="TableTest">
	<tr>
		<td>
			AAAaaaaa
		</td>
		<td>
			bbbbBBBB
		</td>
	</tr>
	<tr>
		<td>
			CCccc
		</td>
		<td>
			DDDDdddd
		</td>
	</tr>
</table>

 

 

.TableTest
{
}


.TableTest tr td
{
	padding:0 5px;
	background-color:Gray; 
}

 

이대로 테스트해봅시다.

 

 

 

2. 문제 일으키기

이제 스타일에 다음과 같은 코드를 추가합니다.

/* 추가 */
.Test1
{
	padding-left:10px;
	background-color:Red;
}

 

 

그다음 이것을 'bbbbBBBB'가 있는 td에 적용합니다.

<td class="Test1">
	bbbbBBBB
</td>

 

테스트 해봅시다.

 

See the Pen Untitled by DangGun (@danggun) on CodePen.

 

.....

그대로입니다 ㅡ,.ㅡ;;;

크롬을 이용하여 스타일이 어떻게 적용되어 있는지 확인해 봅시다.

 

선택자 조건이 여러 개인 경우 우선순위가 항상 헷갈린데....

위 예제에서 '.TableTest tr td'와 '.Test1'의 우선순위가 같습니다.

 

이런 경우 부모-자식 관계가 많은 것이 우선되므로 '.TableTest tr td'가 표시됩니다.

 

 

3. not() 사용하기

저런 경우 필요한 것이 not()입니다.

 

'.Test1'를 다음과 같이 수정합니다.

.Test1:not(.TableTest)
{
	padding-left:10px;
	background-color:Red;
}

 

 

이렇게 하면 '.Test1'이 적용된 요소에서는 '.TableTest'가 무시 됩니다.

 

See the Pen CSS3 - not() Test2 by DangGun (@danggun) on CodePen.

 

'.TableTest'가 무시되면서 우선순위가 올라가서 적용된 것을 볼 수 있습니다.

 

 

 

마무리

참고 : kilianvalkhof.com - The CSS3 :not() selector

 

CSS를 다루다 보면 이해한가는 경우가 꽤 있죠 ㅎㅎㅎ