목차
- :not(selector) 예제 - 지정 선택자 아닌 요소 선택
- :not(selector) 정의
- :not(selector) 구문
- :not(selector) 예제 - 첫번째 자식요소 제외 + 요소 간 구분 막대 추가)
- :not(selector) 예제 - 마지막 자식요소 제외
- :not(selector) 예제 - 부모div 박스 만들기
- :not(selector) 예제 - href="#ID" 속성 갖는 a 요소 전부
- :not(selector) 예제 - 선택요소 이외의 형제들 불투명도 조절
- :not(selector) 예제 - 여러 요소 제외
- :not(selector) 예제 - 2번째 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 내용 }
:not(selector) 예제 - 선택요소 이외의 형제들 불투명도 조절
<style>
ul li {float:left; list-style:none;}
ul:hover li:not(:hover){ opacity:.3}
</style>
<ul>
<li><img src="//source.unsplash.com/featured/150x150"></li>
<li><img src="//source.unsplash.com/featured/150x151"></li>
<li><img src="//source.unsplash.com/featured/150x152"></li>
</ul>
결과보기
minxs 님 (221124) https://sir.kr/qa/480905
:not(selector) 예제 - 여러 요소 제외
※ 첫번째 및 마지막 span 요소 제외
<style>
span:not(:first-child,:last-child) {
color:red;
}
</style>
<div>
<span>홈짱닷컴</span>
<span>Homzzang.com</span>
<span>홈페이지 제작관리 강의</span>
</div>
결과보기
:not(selector) 예제 - 2번째 a링크만 제외하고 나머지 숨기기
<style>
.hz a:not(:nth-child(2)) {
display:none;
}
</style>
<div class="hz">
<a href="https://google.com">구글</a>
<a href="https://homzzang.com">홈짱닷컴</a>
<a href="https://sir.kr">그누보드</a>
</div>
결과보기
