css3 :not 선택자

css3를 쓰면 css2에 비해서 퍼블리셔가 원하는 결과를 얻기가 굉장히 수월하다.

예전 같으면 스크립트의 도움을 받았어야 할 일을 css만으로 처리가 가능해졌기 때문이다.

display:flex, nth-child(), calc()와 더불어 :not 선택자는 정말 축복이다.

사용방법은 간단하다.

:not(.foo) {color:blue}

와 같이 사용하면 .foo 클래스가 아닌 다른 엘레먼트는 모두 텍스트 컬러 색을 파란색으로 바꾸란 뜻이다.

좀 더 세분화 할 수도 있다.

div:not(.foo) { color:blue}

div중에서 foo클래스가 없는 div는 텍스트 컬러를 파란색으로 하라는 뜻이다.

Elements뿐만 아니라 클래스, ID를 대상으로도 선언할 수 있는 것은 당연하다.

.chartArea라고 선언한 엘레먼트에 chartArea5라는 클래스를 동시에 부여한 엘레먼트들이 있는데, chartArea5가 주어지지 않은 chartArea 클래스를 가진 엘레먼트에 속성을 제어하고 싶다면

.chartArea:not(.chartArea5){ flex-direction: column}

이렇게 사용하면 된다.

예컨데 이 방법은 반응형에서 매우 중요하게 사용될 수 있다.

특정 레이아웃에서는 좌우 div가 6:4의 비율을 갖고 있고, chartArea5를 준 div에 감싸져 있는 flexItem들은 5:5의 비율로 갖고 있는데, 6:4인 경우에는 해상도 1340px에서 flex-direction을 row에서 column으로 바꾸는데, chartArea5 클래스가 부여된 레이아웃에서는 1180px에서 바꾸고 싶다면 다음과 같이 주면 된다.

HTML

<div class="chartArea chartArea5">
  <div class="left">
    <div class="upper">
      <!-- //segment Header s-->
      <div class="segmentHeader">
        <div class="segmentTitle">
        <h3>실적 트렌드 그래프</h3>
        </div>
        <div class="btnFarm">
        <ul class="btnFarmUL">

CSS

@media screen and (max-width:1340px) {
	/* 6:4 일때 1단으로 줄어드는 최적지점. 컨텐츠나 헤더 구성에 따라 폭 변화 가능*/
	.chartArea:not(.chartArea5){ flex-direction: column}
	.chartArea:not(.chartArea5)>div{flex: 1}
	.chartArea:not(.chartArea5) .left {margin-right: 0;}
}
@media screen and (max-width:1180px) {
	/* 5:5 일때 1단으로 줄어드는 최적지점. 컨텐츠나 헤더 구성에 따라 폭 변화 가능*/
	.chartArea.chartArea5{ flex-direction: column}
	.chartArea.chartArea5>div{flex: 1}
	.chartArea.chartArea5 .left {margin-right: 0;}
}
@media screen and (max-width:1115px) {
	/* 최종적으로 이 이하는 폭 고정에 대한 예시, 고정 해상도는 결정해서 max값과 wrapper의 min값 수정 하시면 됩니다.*/
	.wrapper {min-width: 1095px;}
}

http://bcode.shop/html/my_vm.html 6:4화면

http://bcode.shop/html/my_vm5.html 5:5화면.