CSS selector (선택자)

html은 <>태그들의 tree 구조로 되어 있는 데 이 것을 DOM tree 라고 부릅니다.

이러한 DOM 트리를 검색하면서 특정 태그(element)를 선택하여 CSS를 적용할 수 있습니다.

이렇게 html 의 요소(element)를 특정하여 선택할 수 있게 해주는 것을 selector (선택자)라고 부릅니다.

 

element selector

*	모든 element
type	지정한 타입의 element
class	지정한 class의 element
type.class	지정한 클래스에 속하는 지정한 타입의 element
#id	attribute에 지정한 id값에 해당하는 element

 

attribute selector

[attr]	attr 어트리뷰트를 정의하는 element
[attr="val"]	attr 의 value가 val인 element
[attr^="val"]	attr의 value가 val로 시작하는 element
[attr$="val"]	attr의 value가 val로 끝나는 element
[attr*="val"]	attr의 value가 val을 포함하는 element
[attr~="val"]	attr의 value가 여러 값을 포함하며 그중 하나가 val 인 element
[attr|="val"]	attr의 value가 vertical bar 로 구분된 목록이며 그중 첫 번째 값이 val 인 element

 

예제

<style>
 [lang] { background-color: white; }
 [lang="es"] {font-size: 14px; }
</style>

 

관계에 의한 선택

selector selector	두 번째 selector 기준에 부합하고 첫 번째 selector 기준에 부합하는 모든 자손 elements
selector > selector	두 번째 selector 기준에 부합하고 첫 번째 selector 기준에 부합하는 자식 element
selector + selector	두 번째 selector 기준에 부합하고 첫 번째 selector 기준에 부합하는 다음 sibling element
selector ~ selector	두 번째 selector 기준에 부합하고 첫 번째 selector 기준에 부합하는 다음 sibling elements

 

예제 

<style>
.dcell > * {vertical-align: middle;}
h1 ~ [lang] {color: blue;}
h1 + [lang] {font-size: 12px;}
</style>

 

종합예제 

<style>
p.select2 {font-weight:bold;} /* 클래스이름이 select2인 p element 선택 */
p#select1 {font-size:15pt;} /* 아이디가 select1인 p element 선택 */
h1[title]{font-size:12pt;} /* attribute 가 title 인 h1 elements 선택 */
span[class="example"]{font-size:10pt;}  /* class 이름이 example 인 span element 선택 */
sapn[class="example"][name="dictator"]{font-size:11pt;} /* class 이름이 example이고 name attribute의 값이 dictator인 span element 선택*/
a[rel~="copyright"]{생략} /* rel  attribute 중 공백으로 구분하는 단어 중에서 copyright 와 일치하는 값이 있는 a element 선택 */
a[hreflang|="en"]{생략}  /* hreflang  attribute가 en으로 시작하는 a element 선택*/
p[title^="hello"]{생략}  /* p태그의 title attribute가 hello 으로 시작하는 문자열일 때 선택 */
</style>

 

Pseudo-Classes 의 다양한 활용

a:link{color:green;}  /*방문한적이 없는 링크 선택*/
a:outside:visited{color:blue;}  /*class 이름이 outside인 것들 중에서 방문한 적이 있는 링크 선택*/
a:hover{생략}  /*마우스 포인터를 올려놓은 element 선택*/
a:active{생략} /*마우스를 클릭한 element 선택*/
a:focus{생략}  /*focus가 적용된 element 선택*/

p:target{생략}  /*같은 문서내에 이동되는 앵커 목적지의 p element */
#sample1:target{생략}  /*id가 sample1인 곳으로 이동되는 목적지의 element*/

p:lang(ko){생략}  /*lang이 한국어인 p element 선택 */

input[type="text"]:enabled {생략}  /*text박스가 enable 되어있는 input data들 선택 반대는 disabled */ 
input:checked{생략}  /*radio 버튼과 checkbox에 check되어있는 element 선택*/

:root{생략}  /* 최상위 root element 선택 */
tr:nth-child(2n+1){생략}  /*table 태그 의 홀수 행 선택*/
tr:nth-child(even){생략}  /*table 태그의 짝수 행 선택*/
tr:nth-child(-n+3){생략}   /*table 태그의 1번 행부터 3번 행까지 선택*/
div>p:first-child{생략}  /*div태그의 첫 번째 자식 element가 p 태그(element)인 경우 선택 됨*/
p:first-child mark{생략}  /*p element의 첫번째 자식 element가 mark element인 경우 선택 됨*/
ol>li:last-child{생략}    /*ol element의 마지막 자식인 li element를 선택*/
td:emty{생략}     /*태그 사이의 내용이 공란인 경우 선택*/
input:not([type="text"]){생략}   /* input element 중에서 type attribute가 text가 아닌 것들을 선택 */
:not(:hover){생략}  /*마우스 오버가 아닌 경우 선택*/
p:not(.sample){생략}   /*클래스 이름이 sample 이 아닌 p element들을 선택 */

 

Pseudo-elements 

#아직까지는 한개의 콜론(:)을 허용하고 있으나 곧 표준에서 제외될 예정이므로 가상엘리먼트 선택자는 2개의 콜론(::)을 연속으로 사용해야 함.

p::first-line{생략}   /*p 태그사이의 첫줄 텍스트 선택*/ 
p::first-letter{생략}   /*첫글자 선택*/
p.note::before {content:"Read this -";}   /*클래스 이름이 note인 p element의 내용 앞에 "Read this-" 문자열을 삽입 함*/
p.note::after{content:"Read this -";}   /*클래스 이름이 note인 p element의 내용 뒤에 "Read this-" 문자열을 삽입 함*/

 

 

 

 

 

 

 

 

이전 글: https://aacii.tistory.com/57 

HTML5 에서 달라진 점들

 

다음 글: https://aacii.tistory.com/77

javascript로 DOM 다루는 방법

 

 

 

 

DEV