only-child, only-of-type, empty
메모장으로 “structural-others.html”을 열고 <body>…</body>안의
</table> 다음 라인에 아래와 같이 코드를 추가합니다.
</table>
<h1>CSS3</h1>
<p>CSS3는 생각보다 <em>재미</em>있습니다.</p>
<p><em>CSS3</em>는 생각보다 <em>재미</em>있습니다.</p>
</body>
위와 같이 p 요소의 자식 요소로 em 요소
1개가 사용되는 형태의 p 요소와 em 요소가 2개가 사용된 p 요소가 정의되어 있습니다. 저장한 후 IE9를 통해 보면 다음과 같이 나타나게 됩니다.
이제 only-child 의사 클래스를 이용해서 선택된 요소에 배경색을 청록색(aqua)로
적용해봅니다.
이를 위해 <style> … </style> 블록 내에 다음과 같이
한 줄을 추가하고 저장합니다.
em:only-child{background-color:
aqua;}
IE9를 통해서 확인하면 다음과 같이 p 요소의 자식 요소로 em 요소 1개가 사용되는 형태의
p 요소의 em 요소에만 스타일이 적용됩니다.
다음으로 only-of-type을 보면 해당 요소가 부모 요소 내에서 단지 한 개만 존재하는 요소 선택하는 형태로 <style> … </style> 블록 내에 다음과 같이 기존 코드를 주석처리하고 그 밑에
한 줄을 추가하고 저장합니다.
//em:only-child{background-color:
aqua;}
위와 같이 저장한 후 IE9를 통해서 보면 부모 요소인 body의 자식 요소들 중 h1 요소가 하나만 존재할 겨우 배경색을 빨강색으로 다음과 같이 나타냅니다.
마지막으로 empty는 자식 요소가 없거나 텍스트가 없는 요소 선택하는 것으로 예를 들어 다음과 같이 3 가지 형태의 p 요소가 HTML
문서 내에 정의되어 있을 경우를 가지고 설명합니다.
<p></p>
<p> </p>
위의 p 요소에 대해서 <style> …
</style> 블록에서 empty 의사 클래스를 이용하여 선택하여 스타일을
적용한다면 “p:empty{…}” 형태로 정의하여 사용할 수 있으며 위에서 공백이 없는 “<p></p>”만이 선택되어 정의된 스타일이 적용되게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.6 의사-요소(pseudo-element)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (1) | 2013.08.01 |
|---|---|
| 1.5.6 부정(negation) pseudo-class (1) | 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 |
| 1.5.5 구조적(structural) pseudo-class (0) | 2013.08.01 |