1.5.6 부정(negation) pseudo-class
부정 의사 클래스는 not(입력파라미터) 안의 입력 파라미터에 의해 선택된 요소(들)을 제외한 모든 요소(들)을 선택하는데 사용하는 것으로 기본 사용 형식은 다음과 같습니다.
HTML 요소이름:not(요소,속성,id,...) {
property:value; property:value; }
위 형식에서 not의 입력 파라미터로는 HTML 요소, 속성, id 등이 올 수 있으며 이러한 입력 파라미터를 통해 선택된
요소(들)을 제외한 요소(들)에 스타일이 적용됩니다. 이제 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>pseudo-class의 not을 이용한 선택자 예제</title>
<style>
</style>
</head>
<body>
<h1>not의 이해</h1>
<p>HTML,CSS and Javascript</p>
<p id="apply_standard">HTML,CSS and Javascript</p>
<p>HTML,CSS and Javascript</p>
</body>
</html>위와 같이 한 개의 h1 요소와 id 속성이 설정되지 않은 2개의 p요소, 마지막으로 id 속성이 “apply_standard”로 설정된 p 요소로 이루어진 HTML 문서를 “pseudo-class-not.html”로 저장한 후 IE9를 통해 확인하면 다음과 같이 나타납니다.
이제 <style>…</style> 블록 내에 다음과 같이 코드를 작성합니다.
<style>
p:not(#apply_standard){ background-color: yellow; }
</style>p 요소 중 id 속성값이 “apply_standard”가 아닌 p 요소에 대해서 배경색을 노란색으로 설정하도록 합니다. 저장하고 IE9를 통해서 보면 p 요소 중 id 속성값이 “apply_standard”가 아닌 2개의 p 요소에 대해서 스타일이 적용되어 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.7 combinator를 이용한 선택자 구성과 규칙 만들기 (0) | 2013.08.01 |
|---|---|
| 1.6 의사-요소(pseudo-element)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (1) | 2013.08.01 |
| only-child, only-of-type, empty (0) | 2013.08.01 |
| first-child, last-child, first-of-type, last-of-type (0) | 2013.08.01 |
| nth-of-type, nth-last-of-type (0) | 2013.08.01 |
