2022-03-03 13:42 작성

CSS selectors

Table of contents
  1. CSS selectors
    1. CSS selectors란?
    2. Selector lists
    3. Selectors의 Types
      1. Type, class, 그리고 ID selectors
      2. 속성 selectors
      3. Pseudo-classes 그리고 pseudo-elements
      4. Combinators
      5. Selectors 참고 표
    4. 저작권

CSS selectors란?

우리는 이미 selectors를 접해보았다. 하나의 CSS selector는 한 CSS 규칙의 첫 번째 부분이다. 이것은 elements, 그리고 browser에게 어떤 HTML elements에 CSS property values를 적용할지 알려주는 다른 조건들의 한 pattern이다. Element 혹은 selector에 선택받은 elements를 subject of the selector 로 표현한다.

일찍이 다른 글에서 몇 개의 다른 selectors를 경험했다. 그리고 서로 다른 방식으로 특정 document를 목표로 하는 selectors가 있다는 것도 배웠다. 예를 들어, h1과 같은 element를 선택하거나 .special과 같은 class를 선택하거나 하는 식으로 말이다.

CSS에서 selectors는 CSS Selectors specification에서 정의된다; CSS의 다른 부분들과 마찬가지로 작동하기 위해서는 browsers의 지원이 있어야 한다. 당신이 마주치게 될 대다수의 selectors는 Level 3 Selectors specification에 정의된 것을 따른다. 이것은 성숙한 사양이므로 여기에 있는 selectors에 대해서는 아주 훌륭한 browser 지원을 기대할 수 있다.

Selector lists

만약 같은 CSS를 사용하는 두 개 이상의 selectors가 있는 경우, 각각의 selectors를 selector list 로 통합하여 모든 개별 selectors에 적용할 수 있다. 예를 들어, 만약 h1과 .special에 같은 CSS를 갖고 있다면 다음과 같이 별개로 작성할 수 있을 것이다.

h1 {
    color: blue;
}

.special {
    color: blue;
}

그리고 이것들을 하나의 selector list 로 통합할 수도 있다, 다음과 같이 쉼표(comma)를 추가하여 통합한다.

h1, .special {
    color: blue;
}

공백(white space)은 쉼표의 이전 혹은 이후에 유효하다. 다음과 같이 각각의 selector가 새 줄에 표시 된다면 가동성이 향상될 것이다.

h1,
.special {
    color: blue;
}

다음의 예시에서 구분된 selector에 오류가 있을 경우 다른 selector는 정상적으로 CSS가 적용되지만 하나의 selector list로 묶여 있는 경우, 하나의 selector에 오류가 생기면 selector list 전체에 CSS가 적용되지 않는다.

/* ✅ 정상 실행 */
h1 {
  color: blue;
}


/* ❌ 실행하지 않음 */
..special {
  color: blue;
}

/* ❌ 실행하지 않음 */
h1, ..special {
  color: blue;
}

Selectors의 Types

다음은 selectors의 몇 가지 서로 다른 groupings를 소개한다. 그리고 어떤 형태의 selector type이 필요한지 아는 것은 올바른 작업 수행을 도울 좋은 도구를 찾는 것과 마찬가지이므로 같이 살펴보도록 하자.

Type, class, 그리고 ID selectors

이 group은 <h1>과 같은 HTML element를 대상으로 하는 selectors를 포함한다:

h1 {}

이것은 class를 대상으로 하는 selectors도 포함한다:

.box {}

또, ID도 포함한다:

#unique {}

속성 selectors

이 selectors group은 element에 존재하는 속성에 기반해 elements를 선택하는 다양한 방법들을 제공한다.

a[title] {}

혹은 특정 value가 속성에 존재하는지 여부에 기반해 선택할 수도 있다:

a[href="https://example.com"] {}

Pseudo-classes 그리고 pseudo-elements

이 selectors group은 한 element의 특정 상태들을 styling 하는 pseudo-classes를 포함한다. 예를 들어, :hover pseudo-class는 mouse pointer로 hovering over(위에 갖다 댐) 했을 때만 element를 선택한다.

a:hover {}

또한, element 그 자체보다 element의 특정 부분을 선택하는 pseudo-elements도 포함한다. 예를 들어, ::first-line은 항상 element의 안에 있는 text의 첫째 줄을 선택한다(아래의 <p> 예시와 같이). 마치 첫째 줄을 <span>으로 감싼 것처럼 행동하며 선택한다.

p::first-line {}

Combinators

마지막 selectors group은 doucments 안에 있는 elements를 목표로 삼기 위해 다른 selectors를 포함한다. 예를 들어, 다음과 같이 child combinator (>)를 사용해 <article> elements의 직접적 children인 paragraphs를 선택한다.

article > p {}

Selectors 참고 표

아래의 표에는 사용 가능한 selectors가 개괄적으로 표시되어 있다. 각각의 link에는 각 selector type을 어떻게 사용해야 하는지에 대한 안내가 적혀 있다.

Selector Example Learn CSS tutorial
Type selector h1 {} Type selectors
Universal selector * {} The universal selector
Class selector .box {} Class selectors
id selector #unique {} ID selectors
Attribute selector a[title] {} Attribute selectors
Pseudo-class selectors p:first-child {} Pseudo-classes
Pseudo-elements p::first-line {} Pseudo-elements
Descendant combinator article p Descendant combinator
Child combinator article > p Child combinator
Adjacent sibling combinator h1 + p Adjacent sibling
General sibling combinator h1 ~ p General sibling

저작권

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

크리에이티브 커먼즈 라이선스
이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.