티스토리 뷰

CSS의 선택자 Selector


- HTML에 스타일을 적용할 부분을 선택 하게끔 해주는 역할

- 선택자의 대표적인 종류는 다음과 같음

1. 타입(엘리먼트/단순) 선택자

2. 하위 선택자

3. ID, CLASS 선택자

4. 유사클래스 선택자

5. 전체 선택자






타입 선택자


• HTML Tag 를 지정하여 선언

• 동일한 속성을 , (콤마) 로 구분하여 선언 가능


h1 {font-size:20px;}

ul {margin:0px;}

a {color:blue;}

p {text-decoration:underline;}

h1, h2 {color:blue;}





하위 선택자


• 특정 엘리먼트 하위의 엘리먼트를 지정할 때 사용

• 공백(space) 으로 구분함

• 뒤에 나올 ID, CLASS 선택자와도 함께 사용 가능


ul li {height:30px;}

ul li a {color:blue;}

table tr td {text-align:center;} 





ID, CLASS 선택자


• 엘리먼트에 사용자가 직접 id, class 선택자 이름을 지정

• id는 # 으로 구분

• class는 . 으로 구분


#bodyContent {width:100%; height:500px;}

.clr {clear:both;}

.datetime {font-size:10px;}

#divNews .tab1 {width:50px;height:50px;}

#divNews ul {background-color:red;} 






유사클래스 선택자


• 해당 엘리먼트의 상태에 따라 구분짓는 선택자로 HTML문서상엔 없으나 CSS에선

 존재하는것 처럼 작성

• IE6에선 a (Anchor) Tag에만 지정이 가능하며 그 외 브라우저는 지원여부가 조금씩 다름


a:link {color:blue;text-decoration:none;} /* 방문하지 않은 링크 */

a:visited {color:red;text-decoration:none;} /* 방문했던 링크 */

a:hover, a:active {color:black;text-decoration:underline;} /* 마우스 오버시와 클릭시 */ 




전체 선택자


• 모든 Tag에 대한 속성을 지정 할 수 있으나, 사용빈도가 매우 낮음

• 선언은 * 로 선언


* {color:red;}

div * {font-size:10px;} 




그 외 선택자

• 자식(child), 인접(Adjacent Sibling), 속성(Attribute)선택자가 추가로 있으나,

 IE6에서 지원을 하지 않는 관계로 널리 사용되고 있지는 않음


/* 자식 선택자 */

div > a {font-size:20px;}

/* 인접 선택자 */

h1 + div {background-color:blue;}

/* 속성 선택자 */

[class=“box”] {background-color:red;} 




선택자 우선순위


• 스타일 선언이 위에서 아래로 순차적으로 적용이 되고,

 마지막에 선언된 스타일이 우선순위를 갖는 특징에 대해서 알아봅시다.


#btnLink {color:red;}

#btnLink {color:blue;}

#btnLink {color:#000;} 







같은 선택자가 아닌 다른 선택자로 중복 선언을 한다면?


<style type="text/css">

 .tit_name { color:red; }

 h3 { color:green; }

 #titName { color:blue; }

</style>

<h3 id="titName" class="tit_name“ style=“color:yellow;”>타이틀 제목</h3> 




선택자에 대한 지정순위


in-line > id > class > type




선택자 강제 우선순위


• 선택자에 대한 지정순위를 무시하고 사용자의 스타일이 우선적으로 적용되게 함

• style 뒤에 공백(space) 후 !important 를 추가


<style type="text/css">

 .tit_name { color:red; }

 h3 { color:green !important; }

 #titName { color:blue; }

</style>

<h3 id="titName" class="tit_name“ style=“color:yellow;”>타이틀 제목</h3>


※ download & Next Menu



저작자 표시 비영리 변경 금지
신고
댓글