CSS: 선택자(Selector) 이해

/* CSS */
* { margin: 0; text-decoration: none; }

/* CSS */
p { background: yellowgreen; color: darkgreen; }

<!-- HTML -->  
<p>태그 선택자(Type Selector)</p>  
<div>태그 선택자(Type Selector)</div>  

태그에는 개발자가 지정해주는 스타일이 적용되지 않습니다.

2.3 클래스 선택자(Class Selector)

패턴	의미	CSS Level	지원하지 않는 브라우저
.myClass	클래스 속성값이 myClass으로 지정된 요소를 선택합니다.	1	–

/* CSS */
.class1 { background: yellowgreen; color: darkgreen; }
div.class2 { background: darkgreen; color: yellowgreen; }

<!-- HTML -->  
<p class="class1">클래스 선택자(Class Selector)</p>  
<p class="class2">클래스 선택자(Class Selector)</p>  
<div class="class2">클래스 선택자(Class Selector)</div>  

[예제 3] 클래스 선택자

클래스 선택자는 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택합니다. 이때 선택하려는 속성값 앞에 마침표를 추가해서 작성합니다. [예제 3] CSS 코드의 첫번째 스타일 규칙은 class1이라는 class 속성값을 가진 모든 태그를 선택합니다. 하지만 두번째 스타일 규칙처럼 마침표 앞에 태그를 붙여주면 범위를 그 특정 태그에 한합니다. 결국 HTML 코드의 두번째

태그 부분은 class 속성값이 class2임에도 선택되지 않습니다.

클래스 선택자를 사용하기 전에 생각해야 할 부분

1. class요소 대신 사용할 수 있는 HTML 태그가 있는지 확인합니다.
   한가지 예를 들어보겠습니다. heading처리한 글씨처럼 보이기 위하여 <h1>과 같은 태그 대신 class선택자를 사용하여 스타일 속성을 줄 수 있습니다. 하지만 이렇게 사용하면 스타일 시트를 적용하지 못하는 (극히 일부일지라도) 브라우저에서는 제목의 기능을 하지 못할 수 있습니다. 그래서, 가능한 올바른 HTML요소를 사용하고 스타일은 따로 적용해야 합니다. 결국 클래스는 HTML태그. 즉 구조를 대신할 수 없습니다.
2. DOM트리 상단에 사용되는 클래스나 ID가 있는지 확인합니다.
   불필요하게 많은 class선택자를 사용할 필요는 없습니다. DOM트리 상단에 같은 스타일을 공유하는 클래스나 ID가 있다면, 새로 클래스 선택자를 사용할 필요없이 함께 사용하면 됩니다.

2.4 ID 선택자(ID Selector)

패턴	의미	CSS Level	지원하지 않는 브라우저
#myId	id 속성값이 myId로 지정된 요소를 선택합니다.	1	–

/* CSS */
#id1 { background: yellowgreen; color: darkgreen; }
div#id2 { background: darkgreen; color: yellowgreen; }

<!-- HTML -->  
<p id="id1">ID 선택자(ID Selector)</p>  
<p id="id2">ID 선택자(ID Selector)</p>  
<div id="id2">ID 선택자(ID Selector)</div>  

[예제 4] ID 선택자

ID선택자는 마침표 대신 #를 사용하고, class속성이 아닌 id속성을 사용하는 것을 제외하곤 클래스 선택자와 매우 유사합니다. 따라서 [예제4] 역시 [예제3]과 같은 결과가 나옵니다. 하지만 이 둘 사이엔 어떤 문자를 사용하느냐보다 더 중요한 차이점이 있습니다.

클래스 선택자를 써야 할까요? ID선택자를 써야 할까요?

비슷하게 사용되는 두 선택자 중 어떤 것을 사용해야 할지 고민에 빠지는 경우가 생길 수 있습니다. 그럴땐 다음 네 가지를 고려해보면 됩니다.

1. 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고, 단 한번 유일하게 적용될 스타일은 ID선택자를 사용하는 것이 좋습니다. 이는 다음과 같은 두 속성의 차이 때문입니다.
   • class속성은 어떤 분류 안에 포함된 요소의 특성을 정의하는 데 사용됩니다.
   • id속성은 어떤 요소에 대해 유일한 특성을 정의합니다. (HTML 문서에서 특정 id속성값은 오직 하나만 있어야 합니다.)
2. 클래스 선택자는 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정하고, ID선택자는 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용합니다.
3. class 속성은 속성값을 두 개 이상 가질 수 있습니다. 그래서 클래스 선택자를 사용하면 한 태그 내에서도 여러종류의 스타일 규칙을 적용할 수 있습니다.
4. ID선택자의 우선순위가 클래스 선택자의 우선순위보다 높습니다. 우선으로 적용되어야 할 스타일을 ID선택자를 사용하여 정의하는 것이 좋습니다. (선택자 우선순위는 뒤에서 다시 언급합니다.)

2.5 복합 선택자(Combinator)

복합 선택자는 두 개 이상의 선택자 요소가 모인 선택자입니다. (이는 꼭 태그 선택자 간의 결합이 아니어도 됩니다.)

하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)

패턴	의미	CSS Level	지원하지 않는 브라우저
E F	E 요소의 자손인 F 요소를 선택합니다.	1	–
E>F	E 요소의 자식인 F 요소를 선택합니다.	2	IE6

/* CSS */
/* 하위 선택자 */
section ul { border: 1px dotted black; }

/* 자식 선택자 */
section>ul { border: 1px dotted black; }  

[예제 5] 하위 선택자와 자식 선택자

태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다. [예제 5]를 통해 선택되는 요소는 다음과 같습니다.

인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)

패턴	의미	CSS Level	지원하지 않는 브라우저
E+F	E 요소를 뒤따르는 F 요소를 선택합니다. (E와 F 사이에 다른 요소가 존재하면 선택하지 않습니다.)	2	IE6
E~F	E 요소가 앞에 존재하면 F를 선택합니다. (E가 F보다 먼저 등장하지 않으면 선택하지 않습니다.)	3	IE6

/* CSS */
/* 인접 형제 선택자 */
h1+ul { background: yellowgreen; color: darkgreen; }

/* 일반 형제 선택자 */
h1~ul { background: darkgreen; color: yellowgreen; }  

[예제 6] 인접 형제 선택자와 일반 형제 선택자

같은 부모 요소를 가지는 요소들을 형제 관계라고 부릅니다. 이 때 먼저 나오는 요소를 ‘형 요소’, 나중에 나오는 요소를 ‘동생 요소’라고 합니다. 먼저 나온다는 것은 html문서에 먼저 쓰여지는 것을 말합니다.

인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 때에만 스타일을 적용합니다. 하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다. [예제 6]을 통해 선택되는 요소는 다음과 같습니다.

2.6 속성 선택자(Attribute Selectors)

위에서 살펴본 선택자들은 태그나 클래스 이름, ID이름만 알면 그대로 스타일을 적용할 수 있습니다. 하지만 이제 살펴볼 속성 선택자는 클래스 속성이나 ID속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다.

패턴	의미	CSS Level	지원하지 않는 브라우저
E[attr]	‘attr’ 속성이 포함된 요소 E를 선택합니다.	2	IE6
E[attr=”val”]	‘attr’ 속성의 값이 정확하게 ‘val’과 일치하는 요소 E를 선택합니다.	2	IE6
E[attr~=”val”]	‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택합니다. (공백으로 분리된 값이 일치해야 합니다.)	2	IE6
E[attr^=”val”]	‘attr’ 속성의 값이 ‘val’으로 시작하는 요소를 선택합니다.	3	IE6
E[attr$=”val”]	‘attr’ 속성의 값이 ‘val’으로 끝나는 요소를 선택합니다.	3	IE6
E[attr*=”val”]	‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택합니다.	3	IE6
E[attr|=”val”]	‘attr’ 속성의 값이 정확하게 ‘val’ 이거나 ‘val-‘ 으로 시작되는 요소 E를 선택합니다.	2	IE6

/* CSS */
/* E[attr]형식 */
a[href] { background: yellowgreen; color: black; }

/* E[attr="val"]형식 */
input[type="text"] { width: 150px; border: 1px solid #000; }

/* E[attr$="val"]형식 */
a[href$=".xls"] { background: darkgreen; }

<!-- HTML -->  
<a href="one.html">E[attr]형식</a>  
<input type="text" name="name">  
<a href="one.xls">E[attr$="val"]형식</a>  

[예제 7] 속성 선택자

속성 선택자는 모두 앞쪽에 태그명과 대괄호 “[]”사이에 속성에 관련된 내용을 넣어서 선택합니다. E[attr=”val”]형식은 속성과 속성값이 완벽하게 일치하는 경우에 선택됩니다. 하지만 E[attr~=”val”]선택자는 띄어쓰기를 통해 여러개 올 수 있는 속성값 중 하나만 일치해도 선택합니다.

또한 E[attr^=”val”]형식은 “val”으로 시작하는 속성값을 선택합니다. 예를 들어 웹 문서에서 외부로 연결되는 링크가 있을 경우 http://로 시작하는지 확인하기 위해 이 선택자를 쓸 수 있습니다. 반대로 E[attr$=”val”]형식은 “val”으로 끝나는 속성값을 선택합니다. 이 선택자는 예제6에 나온 것 처럼 어떤 파일이 링크될 경우, 그 파일의 확장자를 확인하기 위해 쓸 수 있습니다.

2.7 가상 클래스 선택자(Pseudo-Classes)

가상 클래스는 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말합니다.

링크 선택자(The link pseudo-classes)와 동적 선택자(The user action pseudo-classes)

패턴	의미	CSS Level	지원하지 않는 브라우저
E::link	방문하지 않은 링크 E를 선택합니다.	1	–
E::visited	방문한 링크 E를 선택합니다.	1	–
E::active	E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택합니다.	1, 2	–
E::hover	E 요소에 마우스가 올라가 있는 동안 E를 선택합니다.	1, 2	–
E::focus	E 요소에 포커스가 머물러 있는 동안 E를 선택합니다.	1, 2	–

:link와 :visited는 문서 안의 링크와 관련된 선택자입니다. 나머지 세가지 선택자는 링크 요소뿐만 아니라 다른 요소에도 적용할 수 있습니다. :active선택자는 해당 요소가 활성화된 상태를 선택합니다. 링크요소가 선택된 경우를 예로 들 수 있습니다. :hover선택자는 마우스 포인터가 해당 요소위에 올라가 있는 상태를 선택합니다. 흔히 말하는 롤오버 효과(rollover)를 만드는 선택자입니다. 마지막 :focus선택자는 해당 요소에 초점이 맞춰있는 상태를 선택합니다. 초점이 맞춰졌다는 것은 텍스트 필드 안에 커서가 놓여진 것과 같은 상태를 말합니다.

구조적 가상 클래스 선택자(Structural pseudo-classes)

구조적 가상 클래스 선택자는 위치를 기준으로 삼습니다. 그래서 요소가 몇번째에 있느냐에 따라 스타일을 다르게 지정할 수 있게 해줍니다. 순차적으로 같은 태그의 여러 항목이 있을 경우, 메뉴 간의 스타일을 변경하거나 할 때 이 선택자들이 유용하게 쓰입니다.

패턴	의미	CSS Level	지원하지 않는 브라우저
E::root	문서의 최상위 요소(html)를 선택합니다.	3	IE6, 7, 8
E::nth-child(n)	앞으로부터 지정된 순서와 일치하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)	3	IE6, 7, 8
E::nth-last-child(n)	뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)	3	IE6, 7, 8
E::nth-of-type(n)	E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택합니다. (E 요소의 순서만 계산에 포함)	3	IE6, 7, 8
E::nth-last-of-type(n)	E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택합니다. (E 요소의 순서만 계산에 포함)	3	IE6, 7, 8
E::first-child	첫 번째 등장하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)	2	IE6
E::last-child	마지막에 등장하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)	3	IE6, 7, 8
E::first-of-type	E 요소 중 첫 번째 E를 선택합니다.(E 요소의 순서만 계산에 포함)	3	IE6, 7, 8
E::last-of-type	E 요소 중 마지막 E를 선택합니다.(E 요소의 순서만 계산에 포함)	3	IE6, 7, 8
E::only-child	E 요소가 유일한 자식이면 선택합니다. (E 아닌 요소가 하나라도 포함되면 선택하지 않습니다.)	3	IE6, 7, 8
E::only-of-type	E 요소가 유일한 타입이면 선택합니다. (E 아닌 요소가 포함되어도 E 타입이 유일하면 선택합니다.)	3	IE6, 7, 8
E::empty	텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택합니다.	3	IE6, 7, 8

그 외의 선택자

언어 선택자(language pseudo-classes)

패턴	의미	CSS Level	지원하지 않는 브라우저
E::lang(ko)	HTML lang 속성의 값이 ‘ko’으로 지정된 요소를 선택합니다.	2	IE6, 7

부정 선택자(Negation pseudo-class)

패턴	의미	CSS Level	지원하지 않는 브라우저
E::not(S)	S가 아닌 E 요소를 선택합니다.	3	IE6, 7, 8

목적 선택자(The target pseudo-class)

패턴	의미	CSS Level	지원하지 않는 브라우저
E::target	E의 URI가 요청되면 선택합니다. (따라서 E는 ID가 지정되어 있어야 합니다.)	3	IE6, 7, 8

UI요소 상태 선택자(The UI element states pseudo-classes)

패턴	의미	CSS Level	지원하지 않는 브라우저
E::enabled	사용 가능한 폼 콘트롤(input, textarea, select, button) E를 선택합니다.	3	IE6, 7, 8
E::disabled	사용 불가능한 폼 콘트롤(input, textarea, select, button) E를 선택합니다.	3	IE6, 7, 8
E::checked	선택된 폼 콘트롤(input checked=”checked”)을 선택합니다.	3	IE6, 7, 8

가상 엘리먼트 선택자(Pseudo-Elements)

패턴	의미	CSS Level	지원하지 않는 브라우저
E::first-line	E 요소의 첫 번째 라인을 선택합니다.	1	IE6
E::first-letter	E 요소의 첫 번째 문자를 선택합니다.	1	IE6
E::before	E 요소의 시작 지점에 생성된 요소를 선택합니다.	2	IE6, 7
E::after	E 요소의 끝 지점에 생성된 요소를 선택합니다.	2	IE6, 7

3. 선택자(Selector) 우선순위

스타일 시트는 다음과 같은 3개의 CSS원천 소스(Original Source)를 가질 수 있습니다.

• 제작자(author) 원천 소스 : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일
• 사용자(user) 원천 소스 : 사용자가 직접 정하는 자신이 사용할 스타일
• 사용자 도구(user agent) 원천 소스 : 웹 브라우저 자체에 지정된 기본 스타일

스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용하게 되면 스타일이 충돌할 수 있습니다. 그렇기 때문에 각 원천 소스간은 물론, 선택자 간의 우선순위를 알아야 합니다. 다음의 우선순위 규칙을 통해 원하는 스타일을 정확히 적용할 수 있습니다.

1) 원천 소스 우선 순위

!important 선언을 한 사용자 스타일 > !important 선언을 한 제작자 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 도구 선언 (브라우저 자체의 선언)

2) CSS 명시도(Specificity) 계산법

!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

!important선언을 사용한 형식이 가장 우선 순위가 높습니다. 그래서 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 합니다.

이를 제외한 나머지 선택자는 대괄호 “[]”안에 있는 숫자를 각각의 점수로 부여하여 우선순위를 계산합니다.

• ID 선택자의 갯수를 세어서 개당 100 으로 계산합니다. (= a)
• 클래스 선택자의 갯수를 세어서 개당 10 으로 계산합니다. (= b)
• 태그 선택자의 갯수를 세어서 개당 1 로 계산합니다. (= c)
• 공용 선택자는 모두 0으로 계산합니다. (= d)
• 가상 엘리먼트는 무시합니다.

→ a + b + c + d의 값이 높은 순서대로 스타일을 적용하는 우선순위를 가지게 됩니다. 다음의 예를 봅시다.

초록색으로 표시된 태그 선택자 3개와 빨간색으로 표시된 클래스 선택자 1개로 이루어진 스타일 규칙입니다. 우선순위 규칙에 따라 b의 값은 10×1=10이 되고, c의 값은 1×3=3이 됩니다. 따라서 이 스타일 규칙의 우선순위 값은 13입니다.

초록색으로 표시된 태그 선택자 1개와 파란색으로 표시된 ID 선택자 1개로 이루어진 스타일 규칙입니다. 우선순위 규칙에 따라 a의 값이 100×1=100이 되고, c의 값은 1×1=1이 됩니다. 따라서 이 스타일 규칙의 우선순위 값은 101입니다.

이 두 스타일 규칙이 하나의 html태그에 겹치는 가능한 다음과 같은 경우가 있다고 하면, 우선순위 값이 101인 아래쪽의 스타일 규칙이 적용됩니다.

<ul>  
....
</ul>  
<ol>  
    <li class="num" id="selector1"></li>  /* 아래쪽 스타일 규칙이 적용되는 부분 */
</ol>  

3) 마지막에 지정된 스타일을 우선 적용합니다.

스타일 우선순위가 같거나, 계산 방법이 없는 경우 마지막에 지정된 스타일이 우선으로 적용됩니다. 예를 들어 자손 선택자와 자식 선택자가 부딪힐 경우, 우선순위 계산법이 없으므로 두 선택자 중 마지막에 지정된 스타일이 적용됩니다.