CSS 선택자(Selector)

CSS 선택자(Selector)란?

선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 

선택자의 종류

디자인 요소를 의도에 알맞게 적용하기 위해서는 많은 종류의 선택자를 잘 혼합해서 사용하는 것이 중요합니다.

1. 전체 선택자(Universal Selector)

* { } : HTML 페이지 내부의 모든 태그를 선택합니다.

전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS속성을 적용합니다. 그렇기 때문에 보통 margin이나 padding값을 초기화하는 등 기본값을 정해 둘 때 사용합니다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩의 속도가 느려질 수 있습니다. 따라서 자주 사용하지 않는 것이 좋습니다.

 

2. 태그 선택자(Type Selector)

p {} : 태그명이 p인 특정 태그를 선택합니다.

태그 선택자는 HTML 요소를 직접 지칭하는 가장 간단한 선택자입니다.

 

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

.class1{} : 클래스 속성값이 class1으로 지정된 요소를 선택합니다.

클래스 선택자는 주어진 값을 class 속성값으로 가진 HTML 요소를 찾아 선택합니다. 이때 선택하려는 속성값 앞에 마침표를 추가해서 작성합니다. 

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

1. class요소 대신 사용할 수 있는 HTML 태그가 있는지 확인합니다.

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

 

2. DOM 트리 상단에 사용되는 클래스나 ID가 있는지 확인합니다.

불필요하게 많은 class선택자를 사용할 필요는 없습니다. DOM 트리 상단에 같은 스타일을 공유하는 클래스나 ID가 있다면, 새로 클래스 선택자를 사용할 필요없이 함께 사용하면 됩니다.

 

4. ID 선택자(ID Selector)

#myId{} : id 속성값이 myId로 지정된 요소를 선택합니다.

ID 선택자는 #를 사용합니다.

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

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

 

1. 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 클래스 선택자를 사용하고, 단 한번 유일하게 적용될 스타일은 ID 선택자를 사용하는 것이 좋습니다. 이는 다음과 같은 두 속성의 차이 때문입니다.

• class 속성은 어떤 분류 안에 포함된 요소의 특성을 정의하는 데 사용됩니다.
• id 속성은 어떤 요소에 대해 유일한 특성을 정의합니다. (HTML 문서에서 특정 id 속성값은 오직 하나만 있어야 합니다.)

2. 클래스 선택자는 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정하고, ID 선택자는 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용합니다.

 

3. class 속성은 속성값을 두 개 이상 가질 수 있습니다. 그래서 클래스 선택자를 사용하면 한 태그 내에서도 여러종류의 스타일 규칙을 적용할 수 있습니다.

 

4. ID 선택자의 우선순위가 클래스 선택자의 우선순위보다 높습니다. 우선으로 적용되어야할 스타일을 ID 선택자를 사용하여 정의하는 것이 좋습니다.

 

5. 복합 선택자(Combinator)

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

 

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

section ul  : section 요소의 자손인 ul 요소를 선택합니다.

section > ul : section 요소의 자식인 ul 요소를 선택합니다.

태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다.

하위 선택자는 부모 요소에 포함된 '모든' 하위 요소에 스타일을 적용합니다.

하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다.

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

E+F : E 요소를 뒤따르는 F 요소를 선택합니다. (E와 F 사이에 다른 요소가 존재하면 선택하지 않습니다.)

E~F : E 요소가 앞에 존재하면 F를 선택합니다. (E가 F보다 먼저 등장하지 않으면 선택하지 않습니다.)

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

 

인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 때에만 스타일을 적용합니다.

하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다.

인접 형제 선택자

일반 형제 선택자

6. 속성 선택자(Atrribute Selectors)

위에서 살펴본 선택자들은 태그나 클래스 이름, ID 이름만 알면 그대로 스타일을 적용할 수 있습니다.

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

 

E[attr] : 'attr' 속성이 포함된 요소 E를 선택합니다.

E[attr="val"] : 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 E를 선택합니다.

E[attr~="val"] 'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다. (공백으로 분리된 값이 일치해야 합니다.)

E[attr^="val"] 'attr' 속성의 값이 'val'으로 시작하는 요소를 선택합니다.

E[attr$="val"] 'attr' 속성의 값이 'val'으로 끝나는 요소를 선택합니다.

E[attr*="val"] 'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다.

E[attr|="val"] 'attr' 속성의 값이 정확하게 'val' 이거나 'val-' 으로 시작되는 요소 E를 선택합니다.

 

속성 선택자는 모두 앞쪽에 태그명과 대괄호 "[]"사이에 속성에 관련된 내용을 넣어서 선택합니다. 

E[attr="val"] 형식은 속성과 속성값이 완벽하게 일치하는 경우에 선택됩니다.

하지만 E[attr~="val"]선택자는 띄어쓰기를 통해 여러개 올 수 있는 속성값 중 하나만 일치해도 선택합니다.

 

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

 

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

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

 

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

E::link : 방문하지 않은 링크 E를 선택합니다.

E::visited : 방문한 링크 E를 선택합니다.

E::active : E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택합니다.

E::hover : E 요소에 마우스가 올라가 있는 동안 E를 선택합니다.

E::focus : E 요소에 포커스가 머물러 있는 동안 E를 선택합니다.

 

:link와 :visited는 문서 안의 링크와 관련된 선택자입니다. 나머지 세가지 선택자는 링크 요소뿐만 아니라 다른 요소에도 적용할 수 있습니다.

:active선택자는 해당 요소가 활성화된 상태를 선택합니다. 링크요소가 선택된 경우 예로 들 수 있습니다. 

:hover 선택자는 마우스 포인터가 해당 요소위에 올라가 있는 상태를 선택합니다. 흔히 말하는 롤오버효과(rollover)를 만드는 선택자입니다.

마지막 :focus 선택자는 해당 요소에 초점이 맞춰있는 상태를 선택합니다. 초점이 맞춰졌다는 것은 텍스트 필드 안에 커서가 놓여진 것과 같은 상태를 말합니다.

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

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

E::root : 문서의 최상위 요소(html)을 선택합니다

E::nth-child(n) : 앞으로부터 지정된 순서와 일치하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)

E::nth-last-child(n) : 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)

E::nth-of-type(n) : E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택합니다. (E 요소의 순서만 계산에 포함)

E::nth-last-of-type(n) : E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택합니다. (E 요소의 순서만 계산에 포함)

E::first-child : 첫 번째 등장하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)

E::last-child : 마지막에 등장하는 요소가 E 라면 선택합니다. (E 아닌 요소의 순서가 계산에 포함)

E::first-of-type : E 요소 중 첫 번째 E를 선택합니다. (E 요소의 순서만 계산에 포함)

E::last-of-type : E 요소 중 마지막 E를 선택합니다. (E 요소의 순서만 계산에 포함)

E::only-child : E 요소가 유일한 자식이면 선택합니다. (E 아닌 요소가 하나라도 포함되면 선택하지 않습니다.)

E::empty : 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택합니다.

 

그 외의 선택자

언어 선택자(langauge pseudo-classes)

E::lang(ko) : HTML lang 속성의 값이 'ko'으로 지정된 요소를 선택합니다

 

부정 선택자(Negation pseudo-class)

E::not(s) : S가 아닌 E 요소를 선택합니다.

 

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

E::target : E의 URI가 요청되면 선택합니다. (따라서 E는 ID가 지정되어 있어야 합니다.)

 

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

E::enabled : 사용 가능한 폼 컨트롤(input, textarea, select, button) E를 선택합니다.

E::disabled : 사용 불가능한 폼 컨트롤(input, textarea, select, button) E를 선택합니다.

E::checked : 선택된 폼 컨트롤(input checked="checked")을 선택합니다.

 

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

E::first-line : E 요소의 첫 번째 라인을 선택합니다.

E::first-letter : E 요소의 첫 번째 문자를 선택합니다.

E::before : E 요소의 시작 지점에 생성된 요소를 선택합니다.

E::after : E 요소의 끝 지점에 생성된 요소를 선택합니다.

 

 

출처 : https://www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해