CSS 선택자 정리와 이해

들어가며.

jQuery의 선택자(Selector)를 정리하려다가 상당 부분이 CSS의 선택자를 알아야 하는 것이기에 CSS 선택자를 먼저 정리해본다.

선택자(Selector)는 스타일시트에서 특정 요소(노드, Elements)의 속성을 설정할 때 해당 요소를 지정하기 위한 방법으로써 해당 요소를 찾아가기 위한 주소라 할 수 있다. 선택자는 크게 기본 선택자, 그룹 선택자, 결합자, 의사 클래스/요소로 구성되며, 이것들의 조합으로 특정 요소를 지정하는 선택자를 구성할 수 있다.

MDN 페이지를 참고하면 더 상세히 알 수 있으며 아래에 링크를 통해 접속할 수 있다. 

 

기본 선택자

가장 일반적으로 사용되는 기본 선택자로 5개가 있으며, 태그명, 특성(속성)명은 대소문자 구분을 하지 않지만 속성명은 대소문자 구분을 한다는 점을 명심해야겠다. ". title"과 ". Title"은 다른 요소를 선택하게 된다는 것이다.  

1. 전체 선택자

html내의 모든 요소를 지정하는 선택자로 "*"(애스터리스크, 별표)로 지정한다. 모든 요소를 지정하기 때문에 요소가 많을 경우 웹브라우저에서 파싱단계의 속도에 영향을 줄 수 있으므로 가급적 사용을 자제하는 것이 좋다.

예제

/* 모든 요소의 색을 검정으로 할 것 */
*{color:black}

/* 모든 요소중 클래스 속성에 "title"가 있는 것들, ".title" 과 동일 */
*.title{font-weight:800}

/* .title 클래스 자신을 제외한 모든 자손 요소 */
.title *{color:red}

/* .title 클래스 자신을 제외한 직계 자식 요소 */
.title > * {text-decoration:underline}

2. 유형(태그) 선택자(Type Selector)

태그를 지정하는 선택자이며 다른 조건 없이 태그를 선택자로 할 경우 html 문서 내의 해당 모든 태그를 선택하게 된다. 하지만 태그 단독으로 사용하는 경우는 normalize 할 때 말고는 많이 사용되지 않는다.

예제

/* 문서내 모든 span 태그 */
span {color:red}

3. 클래스 선택자(Class Selector)

지정된 class 속성의 모든 노드를 선택한다.

예제

/* .title 클래스를 가진 모든 요소 */
.title{color:blue}

/* .title 클래스를 가진 모든 h3 태그 */
h3.title{font-width:700}

/* .title 클래스와 .red 클래스를 모두 가지는 요소 */
.title.red{color:red}

/* .title 클래스의 모든 자손 노드 중 blue 클래스를 가진 요소 */
.title .blue{color:blue}

/* .title 클래스의 직계 자식 노드중 .green 클래스를 가진 요소 */
.title>.green{color:green}

4. ID 선택자(ID Selector)

태그 속성중 id 값으로 요소를 선택한다.

예제

/* userid를 id 속성값으로 가진 요소 */
#userid{font-size:16px}

5. 특성 선택자(Attribute Selector)

대괄호 안에 지정된 특성(속성) 값을 가진 요소를 선택하며, 특성명과 그 값의 비교하여 선택할 수 있다.
속성 값은 기본적으로 대소문자를 구분하니 스타일 작성 시 유의해야 한다.

예제

/* 값의 유무와 상관 없이 href속성이 지정된 요소를 선택 */
[href]{color:red}

/* dir속성값이 rtl 인 요소, 값은 공백이 없는 단일 단어여야한다. */
[dir="rtl"]{text-align:right}

/* lang 속성값이 en 인 요소, 값은 공백으로 분리된 여러 단어가 있을 수 있음 (lang="en kr") */
[lang~="en"]{text-align:left}

/* 
* lang 속성값이 zh와 일치하거나 zh로 시작하면서 대시"-"가 바로 이어지는 요소, 
* 주로 언어 관련 선택자로 사용(lang="zh-CN") 
*/
[lang|="zh"]{font-family:Arial}

/* href 속성값이 "#"으로 시작하는 요소(접두사) */
[href^="#"]{color:red}

/* href 속성값이 "com"으로 끝나는 요소(접미사) */
[href$="com"]{color:blue}

/* 대괄호를 닫기전에 i를 입력하면 속성값의 대소문자를 구분하지 않는다. */
[href="ioerror.tistory.com" i]

/* 대괄호를 닫기전에 s를 입력하면 속성값의 대소문자를 구분한다. */
[href="ioerror.tistory.com" s]

그룹 선택자

공통 항목이 없는 요소들에 동일한 스타일을 지정할 때 콤마", "로 구분하여 한번에 스타일을 지정할 수 있다.

단, 그룹선택자중 브라우저가 지원하지 않는 선택자가 있다면 그룹 내의 모든 선택자는 무효화된다.

예제

/* h4 태그와 c-red 클래스를 가진 span 그리고 텍스트 입력폼 요소를 선택한다. */
h4, span.c-red, input[type='text'] {color:red}

결합자

선택자를 상하 또는 수평적으로 결합하여 특정 요소를 선택할 수 있다.

참고로 자손, 자식 결합자처럼 부모에서 자손(자식) 노드로 찾아갈 수는 있지만 자손이 조상을 찾아갈 수는 없다. 

1. 자손 결합자

공백으로 구분하여 "부모선택자 자손선택자" 형식으로 지정한다.

부모 요소 아래의 지정된 선택자의 모든 요소를 선택한다. 

/* 테이블 아래의 모든 th 요소 */
table th{background:#dddddd}

2. 자식 결합자

부모 요소의 바로 아래 요소를 선택하며, 닫는 꺽쇠 괄호">"로 구분하여 선택한다.

/* 테이블 바로 아래의 tr 요소를 선택한다. */
table > tr{background:#dddddd}

3. 일반 형제 결합자

틸드(물결문늬) "~"로 구분하여 선언되며, 동일한 부모를 가지는 요소들 중 첫번째 선택자 요소 이후 부터 두번째 선택자 요소들을 선택한다.

<style>
/* p 태그의 형제 span 요소 중 p 다음에 오는 span요소들을 선택한다.*/
p ~ span{color:red}
</style>
<div>Hello</div>
<span>Span 태그 1 선택되지 않습니다.</span>
<p>첫번째 선택자</p>
<span>Span 태그 2 빨간색입니다.</span>
<span>Span 태그 3 빨간색입니다.</span>

4. 인접 형제 결합자

더하기"+"로 구분하여 선언되며, 앞에 지정된 선택자 요소 다음에 오는 요소들 중 두번째 선택자 요소들 중 첫번째 요소를 선택한다.

<style>
/* p 태그 다음에 도는 태그 중 첫번째 span 요소를 선택한다.*/
p + span{color:red}
</style>
<div>Hello</div>
<span>Span 태그 1 선택되지 않습니다.</span>
<p>첫번째 선택자</p>
<span>Span 태그 2 빨간색입니다.</span>
<span>Span 태그 3 선택되지 않습니다.</span>

 

의사(가상) 클래스/요소

html 문서의 코드로 포함되지 않는, 태그의 상태 정보(의사 클래스)와 개체(의사 요소)를 선택할 수 있다.

의사 요소를 선택한다기 보다 생성한다고 보는게 맞는거 같다.

1. 의사 클래스

콜론":"으로 구분하여 선언되며 지정된 선택자가 콜론 다음의 상태값이면 선택된다.

의사 클래스의 목록은 다음의 MDN 페이지에서 확인 가능하다.

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes#%ED%91%9C%EC%A4%80_%EC%9D%98%EC%82%AC_%ED%81%B4%EB%9E%98%EC%8A%A4_%EC%83%89%EC%9D%B8

 

2. 의사 요소

두개의 콜론"::"으로 구분하여 선언되며 지정된 선택자의 자식 요소로 생성된다.

의사 요소의 목록은 다음의 MDN 페이지에서 확인 가능하다.

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

 

 

MDN 선택자 페이지 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors)