• Q&A
  • 회원가입
  • 로그인

[selector] CSS - :not(selector) 선택자 - (특정요소/특정선택자) 아닌 모든요소선택 (=낫선택자 = 특정요소제외 = 특정선택자제외) (IE9 이상)

목차
  1. :not(selector) 예제 - 지정 선택자 아닌 요소 선택
  2. :not(selector) 정의
  3. :not(selector) 구문
  4. :not(selector) 예제 - 첫번째 자식요소 제외 + 요소 간 구분 막대 추가)
  5. :not(selector) 예제 - 마지막 자식요소 제외
  6. :not(selector) 예제 - 부모div 박스 만들기
  7. :not(selector) 예제 - href="#ID" 속성 갖는 a 요소 전부

 

:not(selector) 예제 - 지정 선택자 아닌 요소 선택 

 

<style>

p {color: red;}

:not(p) {color: blue;} /* P 요소 아닌 요소는 파란색 글씨 */

</style>


<h1>H1요소 : 홈짱닷컴</h1>

<p>P요소 : Homzzang.com</p>

<p>P요소 : 홈페이지제작관리</p>

<div>DIV요소 : HTML CSS JS</div>

<a href="https://homzzang.com" target="_blank">A요소 : 홈짱닷컴 바로가기</a>

 

결과보기

 

:not(selector) 정의

 

지정 (요소/선택자) 아닌 모든 요소를 선택.

 


 

1.

  • :not() 중첩 허용 X (예) :not(:not(...))
  • :not(*) 허용 X (∵ 요소 아닌 요소 선택은 말이 안 됨.)
  • 명시도 높이기도 함. (예) #hz:not(#sir)가 #hz보다 명시도 높음.
  • :not(.hz) 경우, .hz 아닌 모든 요소 (예: <html> <body>) 의미.

 

2.

CSS3

3.
IE9 이상 최신브라우저 지원.

단, 요소 리스트 독립변수는 IE지원X

 

4.

MDN :not() 선택자 예제 보기

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

 

 

:not(selector) 구문

 

:not(selector) { css 선언;}

 


[매개변수]

 

selector

필수. 제외할 선택자.

 

 

:not(selector) 예제 - 첫번째 자식요소 제외 + 요소 간 구분 막대 추가

 

<style>

li {

    float: left;

    position: relative;

    padding: 18px 30px;

    list-style:none;

}

li:not(:first-child)::before {

    content: '';

    display: block;

    position: absolute;

    top: 50%;

    left: 0;

    width: 1px;

    height: 15px;

    margin-top: -8px;

    background: #c3c3c3;

}

</style>

 

<ul>

    <li>홈짱닷컴</li>

    <li>Homzzang.com</li>

    <li>홈페이지 제작</li>

</ul>

 

결과보기

 

:not(selector) 예제 - 마지막 자식요소 제외

 

.btn-group button:not(:last-child) {

  border-right: none; /* 중복테두리 방지 */

}

 

예제보기

※ 버튼 마지막 요소를 제외한 모든 버튼의 오른쪽 테두리 제거.

 

:not(selector) 예제 - 부모div 박스 만들기

 

<style>

#hz {

  border:5px solid blue;

}

#hz > div:not(:last-child) {

  float:left; 

  width:33%; 

  height:50px;

  border:1px solid red; 

}

#hz > div:last-child {

  clear:both;

}

</div>

 

<div id='hz'>

  <div class='a'></div>

  <div class='b'></div>

  <div class='c'></div>

  <div class='d'></div>

</div>

 

결과보기

※ 부모요소에 overflow:hidden 또는 overflow:auto 속성 적용해도 됨. (clearfix핵)

 

:not(selector) 예제 - href="#ID" 속성 갖는 a 요소 전부

 

a[href*="#"]:not([href="#"])') { CSS 내용 }

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012