선택기

Andy Bell

기사의 첫 번째 단락인 경우에만 더 크게 빨간색으로 표시하고 싶은 텍스트가 있는 경우 어떻게 합니까?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

CSS 선택기를 사용하여 특정 요소를 찾고 다음과 같이 CSS 규칙을 적용합니다.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS는 이와 같은 상황을 해결하는 데 도움이 되는 매우 단순한 것부터 매우 복잡한 것까지 요소를 선택하고 요소에 규칙을 적용할 수 있는 많은 옵션을 제공합니다.

CSS 규칙의 일부

선택기의 작동 방식과 CSS에서의 역할을 이해하려면 CSS 규칙의 일부를 아는 것이 중요합니다. CSS 규칙은 하나 이상의 선택자와 하나 이상의 선언을 포함하는 코드 블록입니다.

이 CSS 규칙에서 선택기는 페이지에서 my-css-rule 클래스가 있는 모든 요소를 찾는 .my-css-rule 중괄호 안에 세 개의 선언이 있습니다. 선언은 선택자와 일치하는 요소에 스타일을 적용하는 속성 및 값 쌍입니다. CSS 규칙은 원하는 만큼 많은 선언과 선택기를 가질 수 있습니다.

단순 선택기

가장 간단한 선택기 그룹은 HTML 요소와 HTML 태그에 추가할 수 있는 클래스, ID 및 기타 속성을 대상으로 합니다.

범용 선택기

와일드카드라고도 하는 범용 선택기는 모든 요소와 일치합니다.

* {
  color: hotpink;
}

이 규칙은 페이지의 모든 HTML 요소가 핫핑크 텍스트를 갖도록 합니다.

유형 선택기

유형 선택기는 HTML 요소와 직접 일치합니다.

section {
  padding: 2em;
}

이 규칙은 모든 <section> 요소가 모든 면에 padding의 2em을 갖게 합니다.

클래스 선택기

HTML은 class 속성에 정의된 하나 이상의 항목을 가질 수 있습니다. 클래스 선택기는 해당 클래스가 적용된 모든 요소와 일치합니다.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

클래스가 적용된 모든 요소는 빨간색으로 표시됩니다.

.my-class {
  color: red;
}

.이 HTML이 아닌 CSS에만 있는 방법을 알아두십시오. . 문자는 클래스 속성 멤버와 일치하도록 CSS 언어를 지시하기 때문입니다. 이는 특수 문자 또는 문자 집합이 선택기 유형을 정의하는 데 사용되는 CSS의 일반적인 패턴입니다.

.my-class의 클래스가 있는 HTML 요소는 다음과 같이 다른 클래스가 여러 개 있더라도 여전히 위의 CSS 규칙과 일치합니다.

<div class="my-class another-class some-other-class"></div>

이는 CSS가 해당 클래스를 정확히 일치시키는 것이 아니라 정의된 클래스를 포함하는 class 속성을 찾기 때문입니다.

ID 선택기

id 속성이 있는 HTML 요소는 해당 ID 값을 가진 페이지의 유일한 요소여야 합니다. 다음과 같이 ID 선택기로 요소를 선택합니다.

#rad {
  border: 1px solid blue;
}

이 CSS는 다음과 같이 id가 rad인 HTML 요소에 파란색 테두리를 적용합니다.

<div id="rad"></div>

클래스 선택기 .과 와 유사합니다. # 문자를 사용하여 CSS가 뒤에 id와 일치하는 요소를 찾도록 지시합니다.

속성 선택기

속성 선택기를 사용하여 특정 HTML 속성이 있거나 HTML 속성에 대한 특정 값이 있는 요소를 찾을 수 있습니다. 대괄호 ([ ])로 묶어 CSS가 속성을 찾도록 지시합니다.

[data-type='primary'] {
  color: red;
}

이 CSS는 다음과 같이 primary 값을 가진 data-type 속성이 있는 모든 요소를 찾습니다.

<div data-type="primary"></div>

data-type의 특정 값을 찾는 대신 값에 관계없이 속성이 있는 요소를 찾을 수도 있습니다.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

이 <div> 요소는 모두 빨간색 텍스트를 갖습니다.

s 연산자를 추가하여 대소문자를 구분하는 속성 선택기를 사용할 수 있습니다.

[data-type='primary' s] {
  color: red;
}

HTML 요소에 primary 대신 Primary의 data-type가 있던 경우, 빨간색 텍스트를 얻지 않습니다. i 연산자를 사용하여 반대(대소문자 구분 안함)를 수행할 수 있습니다.

대소문자 연산자와 함께 속성 값 내의 문자열 부분과 일치하는 연산자에 액세스할 수 있습니다.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

그룹화 선택기

선택기는 하나의 요소만 일치시킬 필요는 없습니다. 여러 선택기를 쉼표로 구분하여 그룹화할 수 있습니다.

strong,
em,
.my-class,
[lang] {
  color: red;
}

이 예는 색상 변경을 <strong> 요소와 <em> 요소 모두로 확장합니다. .my-class라는 크래스와 lang 속성이 있는 요소로 확장됩니다.

Check your understanding

Test your knowledge of simple selectors

* {}

div {}

가짜 클래스 및 가짜 요소

CSS는 요소를 가리켰을 때, 요소 내부의 구조 또는 요소의 일부와 같은 특정 플랫폼 상태에 초점을 맞춘 유용한 선택기 유형을 제공합니다.

가짜 클래스

HTML 요소는 상호 작용하거나 자식 요소 중 하나가 특정 상태에 있기 때문에 다양한 상태에 있습니다.

예를 들어 사용자가 HTML 요소를 마우스 포인터로 가리킬 수 있거나 하위 요소를 사용자가 가리킬 수도 있습니다. 이러한 상황에서는 :hover 가짜 클래스를 사용하십시오.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

가짜 클래스 모듈에서 자세히 알아보십시오.

가짜 요소

의사 요소는 플랫폼 상태에 응답하는 대신 CSS로 새 요소를 삽입하는 것처럼 작동하기 때문에 의사 클래스와 다릅니다. 콜론(:)을 사용하는 대신 이중 콜론(::)을 사용하기 때문에 가짜 클래스와 구문적으로 다릅니다.

.my-element::before {
  content: 'Prefix - ';
}

링크 레이블에 파일 유형을 접두사로 붙인 위의 데모에서와 같이 ::before 가짜 요소를 사용하여 요소 시작 부분에 내용을 삽입하거나 ::after 가짜 요소를 사용하여 내용을 요소의 끝에 삽입합니다.

가짜 요소는 콘텐츠 삽입에만 국한되지 않습니다. 요소의 특정 부분을 대상으로 지정하는 데 사용할 수도 있습니다. 예를 들어 목록이 있다고 가정합니다. ::marker를 사용하여 목록의 각 글머리 기호(또는 번호)의 스타일을 지정합니다.

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

또한, ::selection을 사용하여 사용자가 강조 표시한 콘텐츠의 스타일을 지정할 수도 있습니다.

::selection {
  background: black;
  color: white;
}

가짜 요소에 대한 모듈에서 자세히 알아보십시오.

Check your understanding

Test your knowledge of pseudo selectors

p:hover {
  background: white;
  color: black;
}

복잡한 선택기

이미 방대한 선택기를 보았지만 때로는 CSS를 사용하여 보다 세밀한 제어가 필요할 것입니다. 여기에서 복잡한 선택기가 도움을 주기 위해 개입합니다.

이 시점에서 다음 선택자가 더 많은 권한을 제공하지만 하위 요소를 선택하여 아래쪽으로만 계단식으로 이동할 수 있다는 점을 기억할 가치가 있습니다. 위쪽을 대상으로 하고 상위 요소를 선택할 수 없습니다. 캐스케이드가 무엇이며 어떻게 작동하는지 이후 강의에서 다룹니다.

결합기

결합자는 두 선택기 사이에 있는 것입니다. 예를 들어 선택기가 p > strong이면 결합기는 > 문자입니다. 이러한 결합기를 사용하는 선택기는 문서에서의 위치에 따라 항목을 선택하는 데 도움이 됩니다.

하위 결합기

하위 결합기를 이해하려면 먼저 상위 요소와 하위 요소를 이해해야 합니다.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

상위 요소는 텍스트를 포함하는 <p>입니다. <p> 요소 내부는 <strong> 요소이며, 내용을 굵게 만듭니다. <p> 안에 있기 때문에 하위 요소입니다.

하위 결합기를 사용하면 자식 요소를 대상으로 지정할 수 있습니다. 이것은 공백() 브라우저가 하위 요소를 찾도록 지시합니다.

p strong {
  color: blue;
}

이 스니펫은 <p> 요소의 하위 요소인 모든 <strong> 요소만 선택하여 반복해서 파란색으로 만듭니다.

이 효과는 위의 예에서 결합 선택기 .top div를 사용하여 더 잘 시각화됩니다. 해당 CSS 규칙은 해당 <div> 요소에 왼쪽 패딩을 추가합니다. 결합기는 반복적이기 때문에 .top에 있는 <div> 요소에는 동일한 패딩이 적용됩니다.

이 데모의 HTML 패널을 보면 .top 요소 자체에 <div> 하위 요소가 있는 여러 <div> 하위 요소가 어떻게 있는지 알 수 있습니다.

다음 형제 결합기

선택기에서 + 문자를 사용하여 다른 요소 바로 다음에 오는 요소를 찾을 수 있습니다.

.top의 하위 요소의 다음 형제인 경우에만 다음 형제 결합기를 사용하여 공간을 추가하십시오.

다음 선택기를 사용하여 .top의 모든 하위 요소에 여백을 추가할 수 있습니다.

.top * {
  margin-top: 1em;
}

.top의 모든 하위 요소를 선택하기 때문에 이 규칙이 잠재적으로 불필요한 추가 공간을 생성한다는 것입니다. 범용 선택기와 혼합된 다음 형제 결합기는 공간을 확보하는 요소를 제어할 수 있을 뿐만 아니라 모든 요소에 공간을 적용할 수 있습니다. .top에 어떤 HTML 요소가 표시되는지에 관계없이 장기적인 유연성을 제공합니다.

후속 형제 결합기

후속 결합기는 다음 형제 선택기와 매우 유사합니다. + 문자 대신 ~ 문자를 사용하십시오. 이것이 다른 점은 요소가 동일한 부모를 가진 다음 요소가 아니라 동일한 부모를 가진 다른 요소를 따라야 한다는 것입니다.

이 후속 결합기는 강성이 약간 낮아 위의 샘플과 같은 상황에서 유용하며, 관련 확인란이 :checked 상태일 때 사용자 지정 스위치의 색상을 변경합니다.

하위 결합기…

하위 결합기(직계 하위 항목이라고도 함)를 사용하면 결합기 선택기와 함께 제공되는 반복에 대한 제어 능력을 높일 수 있습니다. > 문자를 사용하면 결합기 선택기가 직계 하위 항목에만 적용되도록 제한할 수 있습니다.

이전의 다음 형제 선택기 예를 고려하십시오. 공백은 다음 형제 각각에 추가되지만 해당 요소 중 하나에 다음 형제 요소도 하위로 있으면 바람직하지 않은 추가 공백이 발생할 수 있습니다.

이 문제를 완화하려면 하위 결합기를 통합하도록 다음 형제 선택기를 > * + *로 바꾸십시오. 이제 이 규칙은 .top의 직계 하위에만 적용됩니다.

복합 선택기

선택기를 결합하여 특이성과 가독성을 높일 수 있습니다. 예를 들어, .my-class 클래스도 포함하는 <a> 요소를 대상으로 하려면 다음을 작성하십시오.

a.my-class {
  color: red;
}

이것은 모든 링크에 빨간색이 적용되는 것은 아니며 <a> 요소일 경우 .my-class에만 빨간색이 적용됩니다. 자세한 내용은 사양 모듈을 참조하십시오.

Check your understanding

Test your knowledge of complex selectors

section.awesome {
  border: 1px solid hotpink;
}

참고 자료

• CSS 선택기 참조
• 대화형 선택기 게임
• 가짜 클래스 및 가짜 요소 참조
• CSS 선택기를 일반 영어 설명자로 변환하는 도구