#2. CSS 선택자

 

# 선택자

 

선택자는 CSS 스타일을 적용할 HTML 요소를 선택하는 방법입니다.

아래는 선택자의 종류입니다:

1. 유형 선택자(Type selector): HTML 요소의 종류를 기준으로 선택합니다. (ex. h1, p, div)
2. 클래스 선택자(Class selector): HTML 요소에 class 속성을 기준으로 선택합니다. (ex. .class-name)
3. 아이디 선택자(ID selector): HTML 요소에 id 속성을 기준으로 선택합니다. (ex. #id-name)
4. 전체 선택자(Universal selector): 모든 HTML 요소를 선택합니다. (*)
5. 속성 선택자(Attribute selector): HTML 요소의 속성 값을 기준으로 선택합니다. (ex. [attribute="value"])
6. 자손 선택자(Descendant selector): HTML 요소의 자손 요소를 선택합니다. (ex. parent element space child element)
7. 자식 선택자(Child selector): HTML 요소의 직속 자식 요소를 선택합니다. (ex. parent element > child element)
8. 인접 형제 선택자(Adjacent sibling selector): HTML 요소의 인접 형제 요소를 선택합니다. (ex. element1 + element2)
9. 형제 선택자(General sibling selector): HTML 요소의 형제 요소를 선택합니다. (ex. element1 ~ element2)
10. 의사 클래스 선택자(Pseudo-class selector): HTML 특정 상태나 속성의 요소를 선택합니다. (ex. element:Pseudo-class)

선택자에 적용된 CSS 스타일은 HTML 문서에서 선택된 요소에 적용 됩니다.

선택자에 의해 선택된 요소에 CSS 스타일이 적용될 때, 스타일은 가장 가까운 요소에 적용되고, 같은 요소에서 여러 개의 스타일이 적용될 때, 가장 마지막에 적용된 스타일이 우선순위를 가집니다.

이것을 "Cascading"이라고 하며, CSS의 이름에서도 유래되었습니다.

 

 

 

# Class 선택자

 

Class 선택자는 .을 사용하여 정의합니다.

Class 선택자는 HTML 요소에 class 속성을 지정하여 사용할 수 있습니다.

 

예:

<p class="highlight">샘플 텍스트.</p>

CSS에서 Class 선택자는 다음과 같이 정의할 수 있습니다.

.highlight {
  background-color: yellow;
  font-weight: bold;
}

 

 

 

# ID 선택자

 

ID 선택자는 #을 사용하여 정의합니다.

ID 선택자는 HTML 요소에 id 속성을 지정하여 사용할 수 있습니다.

 

예:

<h1 id="title">Hello World</h1>

CSS에서 Class 선택자는 다음과 같이 정의할 수 있습니다.

#title {
  color: red;
  font-size: 36px;
}

 

※ Class 선택자는 한 개 이상의 요소에 스타일을 적용할 수 있지만, ID 선택자는 각 페이지에서 한 번만 사용될 수 있습니다.

ID 선택자의 우선순위는 Class 선택자보다 높습니다.

 

# 전역 선택자

 

전역 선택자(Universal selector)는 CSS에서 모든 요소를 선택할 때 사용하는 선택자입니다.

전역 선택자는 * 문자를 사용하여 정의합니다.

* {
  margin: 0;
  padding: 0;
}

위의 예제에서는 모든 요소에 margin: 0, padding: 0인 스타일이 적용됩니다.

전역 선택자는 모든 요소에 공통적으로 적용할 스타일을 지정할 때 많이 사용됩니다.

하지만, 전역 선택자는 너무 많은 스타일을 적용하기 때문에 페이지의 렌더링 속도와 성능에 영향을 미칠 수 있습니다.

따라서, 가능한 최소한으로 사용하는 것이 좋습니다.

 

 

# 속성 선택자

 

속성 선택자(Attribute selector)는 HTML 요소의 속성 값을 기반으로 CSS 스타일을 적용하는 방법입니다.

다음은 input 요소의 type 속성 값이 "text"인 경우만 CSS 스타일을 적용하는 예입니다:

input[type="text"] {
  color: red;
}

 

속성 선택자는 속성 값이 특정 문자열을 포함하는 경우에도 사용할 수 있습니다.

예를 들어, 다음은 a 요소의 href 속성 값에 ".com"이 포함된 경우 CSS 스타일을 적용하는 예입니다:

a[href*=".com"] {
  color: red;
}

 

 

 

# 자손 선택자

 

자손 선택자(descendant selector)는 HTML 문서에서 특정 요소의 하위 요소를 선택하는 CSS 선택자입니다.

예를 들어, 다음은 부모 요소 <ul> 안에 있는 모든 <li> 요소를 선택하여 CSS 스타일을 적용하는 예입니다:

ul li {
  color: blue;
}

 

 

 

# 의사 클래스 선택자

 

의사 클래스 선택자(Pseudo-class selector)는 HTML 요소의 특정 상태나 속성에 따라 CSS 스타일을 적용하는 방법입니다.

의사 클래스 선택자는 다음과 같은 형식으로 사용됩니다:

element:pseudo-class {
  /* CSS 속성 */
}

위의 형식에서, element는 스타일을 적용할 요소이며, pseudo-class는 요소의 특정 상태나 속성을 나타내는 의사 클래스 입니다.

 

예를 들어, 다음은 a 요소에 마우스가 오버된 경우 CSS 스타일을 적용하는 예입니다:

a:hover {
  color: blue;
}

의사 클래스 선택자는 HTML 요소의 특정 상태에 따라 CSS 스타일을 적용할 때 유용하게 사용될 수 있습니다.

:active, :focus, :visited, :first-child, :nth-child() 등 CSS에서 사용할 수 있는 의사 클래스는 매우 다양하게 있습니다.

 

 

 

# 선택자의 우선순위

 

CSS 우선 순위는 모든 스타일 적용에 중요한 역할을 합니다.

따라서, 스타일이 적용되는 방식을 알고 있어야 합니다.

CSS 우선 순위를 이해하지 못하면 예상치 못한 스타일이 적용될 수 있습니다.

(1) 전체적인 CSS 우선 순위에 대한 개념을 간단히 정리하자면,

인라인 스타일 > 내부 (또는) 추가한 스타일 > 외부 스타일 > 브라우저별 디폴트 스타일

순으로 우선 순위가 높습니다.

 

CSS 우선 순위가 같은 경우 마지막에 적용된 스타일이 우선 순위가 높습니다.

 

 

(2) 세부적인 CSS 우선 순위에 대해 정리해보면 다음과 같은 상황 등이 있습니다.

 

• ID 선택자 vs. Class 선택자

ID 선택자의 우선 순위가 Class 선택자보다 높습니다.

예: #header { color: red } vs. .header { color: blue }

이 경우 header ID 선택자의 색상은 red가 됩니다.

 

• Class 선택자 vs. Tag 선택자

Class 선택자의 우선 순위가 Tag 선택자보다 높습니다.

예: .header { color: red } vs. header { color: blue }

이 경우 header Class 선택자의 색상은 red가 됩니다.

 

• 부모-자식 관계

부모 선택자에서 자식 선택자로 갈수록 우선 순위가 높습니다.

예: .header .title { color: red } vs. .header { color: blue }

이 경우 header 요소의 자식인 title 요소의 색상은 red가 됩니다.

 

• 속성 선택자 vs. 태그 선택자

속성 선택자의 우선 순위가 태그 선택자보다 높습니다.

예: input[type="text"] { color: red } vs. input { color: blue }

이 경우 type 속성이 text인 input 요소의 색상은 red가 됩니다.

 

• 인라인 스타일 vs. 외부 스타일 시트

inline style의 우선 순위가 external style sheet보다 높습니다.

예: <p style="color: red;"> vs. p { color: blue; } (외부 style sheet)

이 경우 inline style이 적용되어 p 요소의 색상은 red가 됩니다.

 

• 동일한 선택자에서 나중에 적용된 CSS

동일한 선택자에서 나중에 적용된 CSS의 우선 순위가 높습니다.

예: p { color: red; } p { color: blue; }

이 경우 나중에 적용된 CSS인 blue가 적용됩니다.

 

• !important

!important 선언이 있는 CSS의 우선 순위가 높습니다.

예: p { color: red !important; } p { color: blue; }

이 경우 !important가 선언된 red CSS가 적용됩니다.

 

• 중첩의 길이가 다른 경우

더 깊은 중첩 깊이의 선택자 CSS의 우선 순위가 높습니다.

예: header > p { color: red; } p { color: blue; }

이 경우 더 깊은 중첩을 가진 red CSS가 적용됩니다.

 

 

(3) !important 키워드를 사용하여 스타일의 우선 순위를 강제할 수 있습니다.

아래의 예에서 !important 키워드를 적용한 color 속성은 모든 다른 스타일을 무시하고 강제적으로 적용됩니다

예:

p {
  color: red !important;
}