본문 바로가기
css

[css2] 전체 선택자

by 지구별에 2014. 11. 20.

 

 

[css2] 전체 선택자

 

전체 선택자는 누구나 알 수 있는 부분 같아 따로 글을 쓰지 않으려 했는데,

 

css 선택자에 관한 글 중 유일하게 빠진 부분이라 짤막하게나마 정리해 보려고 합니다.

 

전체 선택자는 전체 요소를 선택하는 선택자 입니다. 별표(*)로 표시 함.

 

* {margin: 0px; padding: 0px;} 라고 하면 html 모든 요소에 적용 됩니다.

 

생략해도 같은 의미 입니다.

 

*.test {color: red;} 는 .text {color:red;}와 같습니다. /*클래스명 test를 지닌 요소는 모두 빨간색으로 하겠다는 뜻*/

 

*#myid {color:red;}는 #myid {color:red;}와 같습니다./* ID가 myid일 경우는 모두 빨간색으로 하겠다는 뜻*/

 

 

자손 선택자와 전체 선택자

 

 

아시다시피 자손 선택자는 이후에 오는 요소(자식, 손자, 후손들 포함)를 선택하는 선택자입니다.

 

자손 선택자, 자식 선택자 차이

 

→자손 선택자 문법 : 공백(space)로 분리함

 

A B{속성: 속성값;}

 


 

body p{color:red;} 라고 하면 body 이후에 오는 모든 p가(자식, 손자, 후손)  빨간색으로 표시 됩니다.

 

중간에 전체 선택자를 넣을 경우 어떻게 될까요?

 

body * p{color:red;} 라고 하면 body 이후에 오는 p 직계 자식을 제외하고 p의 모든 후손이 빨간색으로 표시 됩니다.

 

body와 * p가 모두 공백(space)으로 분리되었다는 것을 주목해 주세요.

 

공백으로 직계 자식을 건너 뛰게 만드는 것입니다.

 

 

 

▶html/css 작성 예

 

<body>
<div>
<h3>제목</h3>
<p>내용1</p>
<p>내용2</p>
</div>
<p>내용3</p>
</body>

 

 

css

body * p{color:red;}
div{border:1px solid green; width: 300px;padding: 10px;}

 

▶실행 화면

universal selector.htm

 

body 바로 직계 <p>내용3</p>을 제외하고 내용1과 내용2는 빨간색으로 표시되었습니다.

 

 

 

 

css

body  p{color:red;}
div

 

▶실행 화면

 

중간에 전체 선택자 없이 자손 선택자만 쓸 경우, body 이후 모든 p가 빨간색으로 표시 됩니다

 

참조: http://meyerweb.com/eric/articles/webrev/200006a.html

 

 

 

css 선택자, 선택자 종류와 사용법

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

:first-child, :last-child 선택자

 

:before , :after 가상 요소

 

반응형

댓글