[css2] 전체 선택자
전체 선택자는 누구나 알 수 있는 부분 같아 따로 글을 쓰지 않으려 했는데,
css 선택자에 관한 글 중 유일하게 빠진 부분이라 짤막하게나마 정리해 보려고 합니다.
전체 선택자는 전체 요소를 선택하는 선택자 입니다. 별표(*)로 표시 함.
* {margin: 0px; padding: 0px;} 라고 하면 html 모든 요소에 적용 됩니다.
생략해도 같은 의미 입니다.
*.test {color: red;} 는 .text {color:red;}와 같습니다. /*클래스명 test를 지닌 요소는 모두 빨간색으로 하겠다는 뜻*/
*#myid {color:red;}는 #myid {color:red;}와 같습니다./* ID가 myid일 경우는 모두 빨간색으로 하겠다는 뜻*/
자손 선택자와 전체 선택자
아시다시피 자손 선택자는 이후에 오는 요소(자식, 손자, 후손들 포함)를 선택하는 선택자입니다.
→자손 선택자 문법 : 공백(space)로 분리함
body p{color:red;} 라고 하면 body 이후에 오는 모든 p가(자식, 손자, 후손) 빨간색으로 표시 됩니다.
중간에 전체 선택자를 넣을 경우 어떻게 될까요?
body * p{color:red;} 라고 하면 body 이후에 오는 p 직계 자식을 제외하고 p의 모든 후손이 빨간색으로 표시 됩니다.
body와 * p가 모두 공백(space)으로 분리되었다는 것을 주목해 주세요.
공백으로 직계 자식을 건너 뛰게 만드는 것입니다.
▶html/css 작성 예
<div>
<h3>제목</h3>
<p>내용1</p>
<p>내용2</p>
</div>
<p>내용3</p>
</body>
css
div{border:1px solid green; width: 300px;padding: 10px;}
▶실행 화면
universal selector.htm
body 바로 직계 <p>내용3</p>을 제외하고 내용1과 내용2는 빨간색으로 표시되었습니다.
css
div
▶실행 화면
중간에 전체 선택자 없이 자손 선택자만 쓸 경우, body 이후 모든 p가 빨간색으로 표시 됩니다
참조: http://meyerweb.com/eric/articles/webrev/200006a.html
CSS란? (HTML과 CSS의 차이, CSS 작성법)
'css' 카테고리의 다른 글
| [css3] text-shadow 속성(글자 그림자 효과) (0) | 2014.11.24 |
|---|---|
| CSS 선택자 요약표 (0) | 2014.11.21 |
| [css3] :only-child :only-of-type 가상 클래스 (0) | 2014.11.19 |
| [css3] :last-of-type 가상 클래스 (2) | 2014.11.18 |
| [css3] :first-of-type 가상 클래스 (0) | 2014.11.17 |
댓글