CSS 선택자의 종류 및 우선순위

CSS 선택자 종류

CSS 선택자에는 여러 종류가 있으며, 각 선택자는 HTML 문서의 요소를 선택하는 데 사용된다. 다음은 일반적인 CSS 선택자 종류이다.

요소 선택자 (Element Selector)

CSS의 요소 선택자(Element Selector)는 HTML 요소의 이름을 기반으로 스타일을 적용하는 선택자이다. 요소 선택자는 가장 기본적인 선택자 중 하나로, 특정 HTML 요소에 스타일을 적용할 때 사용한다. 요소 선택자는 다음과 같은 형식을 가진다.

요소이름 {
  속성: 값;
}

여기서 "요소이름"은 HTML 문서에서 태그 이름을 의미한다. 예를 들어, 모든 h1 요소에 적용되는 스타일을 설정하려면 다음과 같은 코드를 작성한다.

h1 {
  color: red;
  font-size: 24px;
}

위 코드는 모든 h1 요소에 빨간색 글씨와 24px 크기의 글꼴을 적용한다.

또 다른 예시로, 모든 p 요소의 글꼴 색상을 파란색으로 지정하려면 다음과 같이 작성할 수 있다.

p {
  color: blue;
}

이렇게 작성하면, 모든 p 요소에 파란색 글꼴 색상이 적용된다.

클래스 선택자 (Class Selector)

CSS의 클래스 선택자(Class Selector)는 HTML 요소에 클래스를 지정하여 스타일을 적용하는 선택자이다. 클래스는 여러 개의 요소에 적용될 수 있으며, 같은 클래스를 가진 요소들에 동일한 스타일을 적용할 수 있다. 클래스 선택자는 다음과 같은 형식을 가진다.

.클래스이름 {
  속성: 값;
}

여기서 "클래스이름"은 HTML 문서에서 클래스 이름을 의미한다. 예를 들어, div 요소 중에서 box 클래스를 가진 요소에 적용되는 스타일을 설정하려면 다음과 같은 코드를 작성한다.

.box {
  background-color: yellow;
  border: 1px solid black;
}

위 코드는 div 요소 중에서 class="box"를 가진 요소들에 노란색 배경과 검은색 테두리가 적용된다.

또 다른 예시로, HTML 문서에서 class="button"을 가진 모든 요소의 배경색을 파란색으로 지정하려면 다음과 같이 작성할 수 있다.

.button {
  background-color: blue;
}

이렇게 작성하면, class="button"을 가진 모든 요소의 배경색이 파란색으로 적용된다.

ID 선택자 (ID Selector)

CSS의 ID 선택자(ID Selector)는 HTML 요소에 고유한 ID를 지정하여 스타일을 적용하는 선택자이다. ID는 단 하나의 요소에만 적용될 수 있으며, 다른 요소와 중복될 수 없다. 따라서 ID 선택자는 해당 ID를 가진 요소에 대해서만 스타일을 적용할 수 있다. ID 선택자는 다음과 같은 형식을 가진다.

#아이디이름 {
  속성: 값;
}

여기서 "아이디이름"은 HTML 문서에서 ID 이름을 의미한다. 예를 들어, div 요소 중에서 id="header"를 가진 요소에 적용되는 스타일을 설정하려면 다음과 같은 코드를 작성한다.

#header {
  background-color: pink;
  height: 100px;
}

위 코드는 div 요소 중에서 id="header"를 가진 요소에 분홍색 배경과 높이가 100px인 스타일이 적용된다.

또 다른 예시로, HTML 문서에서 id="main-content"를 가진 요소의 글꼴 크기를 18px으로 지정하려면 다음과 같이 작성할 수 있다.

#main-content {
  font-size: 18px;
}

이렇게 작성하면, id="main-content"를 가진 요소의 글꼴 크기가 18px으로 적용된다. ID 선택자는 HTML 요소에 고유한 ID를 지정하여 스타일을 적용할 때 매우 유용하다.

자손 선택자 (Descendant Selector)

CSS의 자손 선택자(Descendant Selector)는 특정 요소의 하위 요소에 스타일을 적용하는 선택자이다. 자손 선택자는 공백(space)으로 구분되며, 상위 요소와 하위 요소를 연결한다. 자손 선택자를 사용하여 하위 요소에만 스타일을 적용할 수 있다. 자손 선택자는 다음과 같은 형식을 가진다.

상위요소 하위요소 {
  속성: 값;
}

여기서 "상위요소"는 하위 요소의 부모 요소를 의미하며, "하위요소"는 스타일을 적용하고자 하는 하위 요소를 의미한다. 예를 들어, div 요소 중에서 id="container"를 가진 요소의 하위 h1 요소에 적용되는 스타일을 설정하려면 다음과 같은 코드를 작성한다.

#container h1 {
  color: blue;
  font-size: 24px;
}

위 코드는 div 요소 중에서 id="container"를 가진 요소의 하위 h1 요소에 파란색 글꼴 색상과 24px 크기의 글꼴 스타일이 적용된다.

또 다른 예시로, ul 요소 중에서 class="list"를 가진 요소의 하위 li 요소에 적용되는 스타일을 설정하려면 다음과 같이 작성할 수 있다.

ul.list li {
  list-style: none;
}

이렇게 작성하면, ul 요소 중에서 class="list"를 가진 요소의 하위 li 요소에 리스트 스타일이 제거된다. 자손 선택자를 사용하여 특정 요소의 하위 요소에 스타일을 적용할 수 있다.

자식 선택자 (Child Selector)

CSS의 자식 선택자(Child Selector)는 특정 요소의 직계 자식에 스타일을 적용하는 선택자이다. 자식 선택자는 >로 구분되며, 상위 요소와 직계 자식 요소를 연결한다. 자식 선택자를 사용하여 직계 자식 요소에만 스타일을 적용할 수 있다. 자식 선택자는 다음과 같은 형식을 가진다.

상위요소 > 직계자식요소 {
  속성: 값;
}

여기서 "상위요소"는 직계 자식 요소의 부모 요소를 의미하며, "직계자식요소"는 스타일을 적용하고자 하는 직계 자식 요소를 의미한다. 예를 들어, div 요소 중에서 id="container"를 가진 요소의 직계 자식 h1 요소에 적용되는 스타일을 설정하려면 다음과 같은 코드를 작성한다.

#container > h1 {
  color: blue;
  font-size: 24px;
}

위 코드는 div 요소 중에서 id="container"를 가진 요소의 직계 자식 h1 요소에 파란색 글꼴 색상과 24px 크기의 글꼴 스타일이 적용된다.

또 다른 예시로, ul 요소 중에서 class="list"를 가진 요소의 직계 자식 li 요소에 적용되는 스타일을 설정하려면 다음과 같이 작성할 수 있다.

ul.list > li {
  margin: 10px;
}

이렇게 작성하면, ul 요소 중에서 class="list"를 가진 요소의 직계 자식 li 요소에 10px의 마진이 적용된다. 자식 선택자를 사용하여 특정 요소의 직계 자식 요소에 스타일을 적용할 수 있다.

인접 형제 선택자 (Adjacent Sibling Selector)

CSS의 인접 형제 선택자(Adjacent Sibling Selector)는 형제 관계에 있는 요소 중 첫 번째 요소에 스타일을 적용하는 선택자이다. 인접 형제 선택자는 +로 구분되며, 앞의 요소와 바로 인접한 다음 요소만을 선택한다. 인접 형제 선택자를 사용하여 첫 번째 요소와 바로 인접한 다음 요소에만 스타일을 적용할 수 있다. 인접 형제 선택자는 다음과 같은 형식을 가진다.

첫번째요소 + 다음요소 {
  속성: 값;
}

여기서 "첫번째요소"는 형제 요소 중 첫 번째 요소를 의미하며, "다음요소"는 첫번째요소 바로 다음에 나오는 형제 요소를 의미한다. 예를 들어, h1 요소 다음에 나오는 p 요소에 스타일을 적용하려면 다음과 같은 코드를 작성한다.

h1 + p {
  font-weight: bold;
}

위 코드는 h1 요소 바로 다음에 나오는 p 요소에 볼드체 스타일이 적용된다. 이와 같이 인접 형제 선택자를 사용하면 특정 요소와 바로 인접한 형제 요소에 스타일을 적용할 수 있다.

일반 형제 선택자 (General Sibling Selector)

CSS의 일반 형제 선택자(General Sibling Selector)는 형제 관계에 있는 모든 요소에 스타일을 적용하는 선택자이다. 일반 형제 선택자는 ~로 구분되며, 앞의 요소와 같은 부모를 가지고 있으면서 앞의 요소 뒤에 나오는 모든 형제 요소를 선택한다. 일반 형제 선택자를 사용하여 앞의 요소 다음에 나오는 모든 형제 요소에 스타일을 적용할 수 있다. 일반 형제 선택자는 다음과 같은 형식을 가진다.

첫번째요소 ~ 다음요소 {
  속성: 값;
}

여기서 "첫번째요소"는 형제 요소 중 첫 번째 요소를 의미하며, "다음요소"는 첫번째요소 이후에 나오는 형제 요소를 의미한다. 예를 들어, h1 요소 이후에 나오는 모든 p 요소에 스타일을 적용하려면 다음과 같은 코드를 작성한다.

h1 ~ p {
  font-style: italic;
}

위 코드는 h1 요소 이후에 나오는 모든 p 요소에 이탤릭체 스타일이 적용된다. 이와 같이 일반 형제 선택자를 사용하면 특정 요소 다음에 나오는 모든 형제 요소에 스타일을 적용할 수 있다.

CSS 선택자 우선순위

CSS 우선순위는 CSS 규칙들 중에서 어떤 규칙이 적용될 것인지를 결정하는 기준이다. CSS 선택자 우선순위는 다음과 같은 3가지 요소로 구성된다.

명시도 (Specificity)

선택자 명시도는 선택자가 얼마나 구체적인지, 얼마나 자세히 지정되었는지를 나타내는 값으로 계산된다. 명시도 값은 쉼표로 구분된 세 개의 수로 이루어져 있으며, 이들 수는 다음과 같은 규칙에 따라 계산된다.

• ID 선택자의 개수 (X, 0, 0)
• 클래스 선택자, 속성 선택자, 가상 클래스 선택자의 개수 (0, Y, 0)
• 요소 선택자, 가상 요소 선택자의 개수 (0, 0, Z)

#id 선택자는 ID 선택자를 한 개 가지고 있으므로 명시도 값이 1, 0, 0이 된다. 클래스 선택자 .class는 클래스 선택자를 한 개 가지고 있으므로 명시도 값이 0, 1, 0이 된다. 태그 선택자 div는 태그 선택자를 한 개 가지고 있으므로 명시도 값이 0, 0, 1이 된다.

만약 같은 요소에 여러 개의 CSS 규칙이 적용된 경우, 명시도 값이 더 높은 규칙이 우선한다. 예를 들어, #id 선택자의 명시도 값이 1, 0, 0이고, .class 선택자의 명시도 값이 0, 1, 0이라면, #id 선택자가 우선한다.

예를 들어 아래와 같은 코드가 있을 경우:

<div id="box">
    <p class="text">lorem</p>
</div>

#box {
    color: blue;
}
div p.text {
    color: red;
}

#box 선택자는 명시도 값이 1, 0, 0 이 되고, div p.text 선택자는 명시도 값이 0, 1, 2 가 되어 동일한 요소에 color 속성이 선언되었지만 명시도가 높은 #box 선택자가 우선시 되어 color: blue가 적용된다.

중요도 (Importance)

속성 값 뒤에 !important를 사용하면 해당 속성의 중요도가 증가한다. !important는 모든 선택자의 우선순위보다 높기 때문에, 이 속성이 적용된 속성은 다른 속성보다 우선한다.

하지만, !important 규칙은 명시도 규칙을 무시하고, 다른 모든 규칙보다 우선한다. 따라서 !important 규칙을 사용하는 것은 권장되지 않는다. !important 규칙을 사용하지 않고도, 명시도 규칙을 잘 이용하여 규칙의 우선순위를 조절할 수 있다.

소스 순서 (Source Order)

동일한 중요도와 명시도를 가진 선택자들 중에서는 나중에 적용된 선택자가 우선한다. 즉, 스타일 시트에서 나중에 나온 규칙이 우선한다.

CSS 우선순위를 파악하기 위해서는 중요도, 명시도, 소스 순서를 고려해야 하며, 우선순위가 높은 규칙이 적용된다.