'Selector'에 해당되는 글 1건
- 2010.12.16 선택자 (Selector)
전체 선택자
이 선택자는 문서내의 모든 요소명을 선택한다. 규칙적인 선택자가 없을 경우에는 전체 선택자가 영향을 준다.
형식 : *
예제 :
타입 선택자예제 :
* {color: red;}
div * p {color: blue;}
div * p {color: blue;}
이 선택자는 문서에서 요소의 이름을 선택한다. 해당하는 요소의 모든 경우가 선택된다. (CSS1에서는 요소 선택자라고 부른다.)
형식 : 요소1
예제 :
자손 선택자예제 :
body {background: #fff;}
p {font-size: 1em;}
p {font-size: 1em;}
특정 요소의 자손관계를 이용해서 요소를 선택할 수 있다. 조상 요소의 자식 요소나 자식의 자식 등을 선택할 수 있다. (CSS1에서는 문맥 선택자라고 부른다.)
형식 : 요소1 요소2
예제 :
자식 선택자예제 :
body h1 {font-size: 200%;}
table tr td div ul li {color: purple;}
table tr td div ul li {color: purple;}
특정 요소의 자식에 해당하는 요소를 선택할 수 있다. 이 선택자는 하나의 자식 요소만 선택이 가능하기 때문에 자손 요소보다 더 제한적이다.
형식 : 요소1 > 요소2
예제 :
인접 형제요소 선택자예제 :
div > p {color: cyan;}
ul > li {font-weight: bold;}
ul > li {font-weight: bold;}
특정 요소의 인접한 형제 요소를 선택할 수 있다. 요소와 문서 구조상의 위치만 고려되고, 두 요소 사이의 텍스트는 무시된다.
형식 : 요소1 + 요소2
예제 :
클래스 선택자예제 :
table + p {margin-top: 2.5em;}
h1 + * {margin-top: 0;}
h1 + * {margin-top: 0;}
HTML이나 SVG, MathML같은 언어에서는 '점 표기법'을 사용하여 특정 클래스를 가지고 있는 요소를 하나이상 선택할 수 있다. 클래스명은 마침표에 바로 붙여서 사용해야 하고, 여러 개의 클래스도 함께 연결해서 사용할 수 있다. 마침표 앞에 요소명이 오지 않는 경우에는 그 클래스를 가진 모든 요소가 선택된다.
형식 : 요소1.classname 요소1.classname1.classname2
예제 :
예제 :
p.urgent {color: red;}
a.external {font-style: italic;}
.example {background: olive;}
a.external {font-style: italic;}
.example {background: olive;}
id 선택자
HTML같은 언어에서는 특정 id를 가지고 있는 요소를 선택할 수 있다. id는 '#' 기호 표시에 바로 붙여서 사용해야 한다. '#' 기호 표시 앞에 요소명이 오지 않는 경우에는 그 id를 가진 모든 요소가 선택된다.
형식 : 요소1#idname
예제 :
예제 :
h1#page-title {font-size: 250%;}
body#home {background: silver;}
#example {background: lime;}
body#home {background: silver;}
#example {background: lime;}
단순 속성 선택자
특정 속성을 가진 요소를 선택할 수 있다.
형식 : 요소1[attr]
예제 :
예제 :
a[rel] {border-bottom: 3px double gray;}
p[class] {border: 1px dotted silver;}
p[class] {border: 1px dotted silver;}
정확한 속성값 선택자
특정 속성에 특정한 값이 있는 요소를 선택할 수 있다.
형식 : 요소1[attr="value"]
예제 :
예제 :
a[rel="Home"] {font-weight: bold;}
p[class="urgent"] {color: red;}
p[class="urgent"] {color: red;}
부분 속성값 선택자
공백으로 속성이 나누어진 속성값에서 일부를 가진 요소를 선택할 수 있다. [class~="value"]는 .value와 같다.
형식 : 요소1[attr~="value"]
예제 :
예제 :
a[rel~="friend"] {text-transform: uppercase;}
p[class~="warning"] {background: yellow;}
p[class~="warning"] {background: yellow;}
시작하는 속성값 선택자
속성값이 특정 값으로 시작하는 요소를 선택할 수 있다.
형식 : 요소1[attr^="substring"]
예제 :
예제 :
a[href^="/blog"] {text-transform: uppercase;}
p[class^="test-"] {background: yellow;}
p[class^="test-"] {background: yellow;}
끝나는 속성값 선택자
속성값이 특정 값으로 끝나는 요소를 선택할 수 있다.
형식 : 요소1[attr$="substring"]
예제 :
임의 속성값 포함 선택자예제 :
a[href$=".pdf"] {font-style: italic;}
속성값이 임의의 값을 포함하는 요소를 선택할 수 있다.
형식 : 요소1[attr*="substring"]
예제 :
예제 :
a[href*="oreilly.com"] {font-weight: bold;}
div[class*="port"] {border: 1px solid red;}
div[class*="port"] {border: 1px solid red;}
하이픈(-)으로 조합된 일련의 값이 있는 lang 속성에 특정 값을 포함하는 요소를 선택할 수 있다.
형식 : 요소1[lang|="lc"]
예제 :
예제 :
html[lang|="en"] {color: gray;}
'Develop > CLIENT SIDE' 카테고리의 다른 글
| Aptana ExtJs + JQuery Code assist 방법 (0) | 2011.10.19 |
|---|---|
| CSS3 Transform & Matrix Filter (개체 회전) (0) | 2010.12.16 |
| 자바스크립트의 나쁜 점들 (더글라스 클락포드) (0) | 2010.12.16 |
| 정규 표현식 (Regular Expression) (0) | 2010.12.16 |
| 가상 클래스와 가상 요소 (0) | 2010.12.16 |
Recent Comment