CSS Selector (CSS 선택자)

원본: CSS Selector – 클래스, 이름, 자식 선택자에 대한 커닝 페이퍼

CSS Selector (CSS 선택자)는 스타일을 지정할 HTML 요소를 특정합니다. 이를 사용하면 한 번에 여러 개의 HTML 요소를 선택할 수도 있습니다.

한 번에 여러 개의 HTML 요소를 선택할 수 있기 때문에 동일한 스타일을 여러 요소에 적용하려는 경우 유용합니다. 왜냐하면 이 작업을 위해 같은 코드를 여러 번 작성하지 않아도 되고 시간도 절약할 수 있기 때문입니다.

CSS Selector는 CSS 코드 작성을 배울 때 가장 먼저 배워야 하는 것들 중 하나입니다. 또한 다양한 CSS 선택자가 있고 이를 사용하는 다양한 방법이 있습니다.

이 포스트에는 CSS를 처음 시작할 때 알아야 할 가장 일반적으로 사용하는 선택자를 설명합니다.

Simple CSS Selector

선택자를 사용하면 스타일 지정을 위해 document의 특정 부분을 선택할 수 있습니다.

심플 선택자는 다음과 같은 하나 이상의 요소를 직접 선택합니다:

유니버셜 선택자 *(애스터리스크) 사용
요소의 이름/타입 기반
요소의 클래스 명 기반
요소의 ID 기반

가장 기본적인 선택자의 사용 방법을 제대로 알면 더 복잡한 선택자의 사용법을 이해하기 쉽습니다.

심플 선택자는 가장 많이 사용하게 될 선택자이며 CSS 코드를 작성해본 경험이 있다면 매우 친숙한 선택자일 것 입니다.

CSS Universal Selector

와일드 카드라고도 하는 유니버셜 선택자는 document의 모든 요소를 선택합니다. 유니버셜 선택자를 사용하려면 애스터리스크 * 문자를 사용하면 됩니다.

* {
    property: value;
}

다른 스타일을 적용하기 전에 CSS 파일의 상단에 유니버셜 선택자를 사용하여 브라우저의 기본 padding과 margin을 0으로 리셋할 수 있습니다.

* {
    padding: 0;
    margin:  0;
}

CSS Type Selector

타입 선택자는 지정된 모든 타입의 HTML 요소를 선택합니다. 이를 사용하려면 HTML 요소의 태그 이름을 넣으면 됩니다. 예를 들어 HTML 문서의 모든 <p> 요소에 스타일을 적용하려면 ‘p’를 사용합니다.

p {
    property: value;
}

위의 코드는 document 내의 모든 <p> 요소를 선택하여 스타일을 지정합니다.

CSS Class Selector

클래스 선택자는 주어진 클래스 명에 따라 HTML 요소를 선택합니다. 이를 사용하면 한 번에 여러 요소를 선택하고 각각에 대해 동일한 스타일을 일괄 적용할 수 있습니다.

스타일 클래스는 재사용이 가능하므로 DRY 개발을 연습하기에 좋은 소재입니다. DRY란 프로그래밍 원칙이며 “Don’t Repeat Yourself”의 줄임말입니다. 이름에서 알 수 있듯이 이 목표는 가능한한 반복적인 코드 작성을 피하는 것 입니다.

클래스 선택자로 요소를 선택하려면 점 문자(.)에 클래스 명을 붙여서 사용합니다.

.my_class {
    property: value;
}

위의 코드는 클래스가 “my_class”인 요소를 선택하고 그에 따라 스타일을 지정합니다.

CSS ID Selector

ID 선택자는 요소의 ID 속성에 따라 HTML 요소를 선택합니다.

요소의 ID는 document에서 고유해야합니다. 즉, 해당 ID 값을 가진 HTML 요소는 하나만 있어야 합니다.

특정 ID를 가진 요소를 선택하려면 해시 문자(#) 뒤에 ID를 사용합니다.

#my_id {
    property: value;
}

위의 코드는 ID가 “my_id”인 요소에만 스타일을 적용합니다.

이 선택자는 되도록 사용하지 말고 클래스 선택자를 사용하는 것이 좋습니다. ID를 사용하여 스타일을 적용하면 이 스타일을 재사용 할 수 없기 때문에 추천하지 않습니다.

CSS Attribute Selectors

많은 HTML 요소는 속성을 가지고 있습니다.

HTML 속성은:

HTML 요소에 대해 추가 정보를 제공합니다.
항상 시작(여는) 태그에 지정합니다.
일반적으로 name=”value”와 같이 name/value 쌍으로 적용합니다.
name/value의 value는 따옴표로 묶어야합니다.

흔히 볼 수 있는 HTML 속성은 href 속성입니다. 이는 여는 <a> 태그에 지정되고 <a> 태그가 연결하는 URL을 지정합니다.

<a href="https://shinyks.com">The best place to learn to code!</a>

“The best place to learn to code!” 텍스트를 클릭하면 href 값인 “https://shinyks.com” URL에 연결합니다.

속성 선택자는 속성 또는 특정 속성 값의 존재 여부에 따라 HTML 요소를 선택합니다.

다양한 유형의 속성 선택자가 있습니다. 다음은 가장 일반적인 속성 선택자 입니다.

The [attribute] Selector

속성 선택자를 사용하려면 대괄호 []를 사용하여 원하는 속성을 선택합니다.

속성 선택자의 문법 구문은 다음과 같습니다:

element[attribute]

이 선택자는 요소에 해당 속성이 존재하는 경우 선택합니다.

a[attr] {
    property: value;
}

위의 예제는 속성 attr의 값에 상관없이 <a> 요소에 속성 attr이 존재하면 선택합니다.

The [attribute=”value”] Selector

다음의 문법 구문과 같이 찾으려는 속성의 값을 지정할 수 있습니다:

element[attribute="value"]

따라서 attr 속성의 값이 정확히 “1”인 요소에 스타일을 지정하려면 다음과 같이 작성합니다:

a[attr="1"] {
    property: value;
}

위의 코드는 attr 속성 값이 “1”인 <a> 요소를 찾아 스타일을 지정합니다.

The [attribute^=”value”] Selector

다음 구문을 사용하면 속성 값이 특정 문자로 시작하도록 지정할 수 있습니다:

element[attribute^="value"]

예를 들어 값이 “www”로 시작하는 attr 속성을 가진 요소를 선택하려면 다음과 같이 작성합니다:

a[attr^="www"] {
    property: value;
}

위의 코드는 attr 속성 값이 “www”로 시작하는 <a> 요소를 선택하여 스타일을 적용합니다.

The [attribute$=”value”] Selector

또한 다음 구문을 사용하여 속성 값이 특정 문자로 끝나도록 지정할 수도 있습니다.

element[attribute$="value"]

예를 들어 attr 속성 값이 “.com”으로 끝나는 <a> 요소에 스타일을 적용하고 싶다면 다음과 같이 작성합니다:

a[attr$=".com"] {
    property: value;
}

The [attribute*=”value”] Selector

속성 값에 특정 문자열을 포함하는 요소를 선택할 수 있습니다. 문법 구문은 다음과 같습니다:

element[attribute*="value"]

이 경우 지정한 문자열의 뒤에 다른 문자가 있어야 합니다. 여기서 지정한 문자열은 온전한 단어일 필요는 없습니다.

예를 들어, “free” 문자열을 포함하는 attr 속성을 가진 요소를 선택하려면 다음과 같이 합니다:

a[attr*="free"] {
    property:value;
}

위의 코드는 attr 속성의 값에 “free”가 포함되어있는 요소를 선택합니다. 즉, “www.free.com”, “freediving” 등을 선택합니다.

The [attribute~=”value”] Selector

다음 구문을 사용하면 속성의 값이 온전한 단어를 포함하는 경우 선택하도록 할 수 있습니다:

element[attribute~= "value"]

예를 들어, attr 속성에 온전한 “free” 라는 단어를 포함할 때 선택하도록 하려면 다음과 같이 작성합니다:

a[attr~= "free"] {
    property: value;
}

위의 코드는 공백 등으로 구분된 “free” 문자열을 포함하는 속성 값을 확인합니다. “www.free.com”이나 “freediving”은 선택되지 않고 “my free world”를 선택합니다.

Grouping CSS Selector

그룹 선택자를 사용하면 한 번에 여러 개의 요소를 지정해 스타일을 적용할 수 있습니다. 이를 사용하려면 쉼표 ,로 구분된 구문을 작성합니다. 예를 들어 <div>, <p>, <span>과 같이 여러 요소를 한 번에 대상으로 지정하는 방법은 다음과 같습니다:

div,p,span {
    property: value;
}

위의 코드는 페이지의 <div>, <p>, <span> 요소를 모두 지정해 같은 스타일을 적용합니다.

CSS Combinators (CSS 연결자)

연결자를 사용하면 요소 사이의 관계나 document에서의 위치에 따라 두 요소를 결합할 수 있습니다.

기본적으로 CSS 선택자 간의 관계를 설명하는 방법으로 두 개의 선택자를 결합합니다. 연결자는 두 선택자의 관계를 지정하고 설명하는 일종의 선택자입니다.

연결자에는 다음의 네 가지 타입이 있습니다:

Descendant combinator
Direct child combinator
General sibling combinator
Adjacent sibling combinator

Descendant Combinator

이름에서 알 수 있듯이 자손 연결자는 지정된 요소의 자손만 선택합니다.

먼저 부모 요소를 넣고 공백을 추가한 다음 자손(자식 또는 자식의 자식 등) 요소를 넣습니다. 다음의 예제를 보겠습니다:

<!DOCTYPE html>
<html>

<body>
  <div>
    <h2>I am level 2 heading</h2>
    <p>I am a paragraph inside a div</p>
    <span>I am a span</span>
    <p>I am a paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
</body>

</html>

위의 예제에서 <div>는 부모 요소이고 두 개의 <p> 요소는 <div> 요소 내부에 있으므로 자식 요소입니다. 또한 <div> 요소 밖에도 <p> 요소가 있습니다.

이 상황에서 <div> 안에 있는 <p> 요소에만 스타일을 지정하려면 다음과 같이 작성하면 됩니다:

div p {
    property: style;
}

위의 코드를 적용하면 “I am a paragraph inside a div”라는 텍스트가 있는 요소에만 스타일이 적용됩니다. 다른 두 자식 요소와 <div> 밖의 <p> 요소에는 스타일이 적용되지 않습니다.

다음은 실제로 스타일을 적용한 예제 코드입니다:

<!DOCTYPE html>
<html>

<head>
  <style>
    div p {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <h2>I am level 2 heading</h2>
    <p>I am a paragraph inside a div</p>
    <span>I am a span</span>
    <p>I am a paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
</body>

</html>

위의 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.

Direct child combinator

직계 자식 연결자는 부모 요소의 바로 밑의 자식 요소만 선택합니다. 이를 사용하려면 부모 요소를 넣은 다음 > 문자를 추가하고 원하는 직계 자식을 넣습니다. 다음의 예제를 보겠습니다.

<!DOCTYPE html>
<html>

<body>
  <div>
    <a href="#">I am a link</a>
    <a href="#">I am a link</a>
    <p>
      <a href="#">I am a link inside a paragraph</a>
    </p>
  </div>
</body>

</html>

부모 요소로 <div>가 있습니다. 부모 요소 안에는 두 개의 <a> 요소가 있고 이들이 <div>의 직계 자식입니다.

부모 요소 <div>의 또 다른 자식 <p> 요소 안에도 <a> 요소가 있습니다. 이는 <div>의 직계 자식은 아니고 자손입니다.

그러므로 <div>의 직계 자식인 <a> 요소에만 스타일을 적용하려면 다음과 같이 해야합니다:

div>a  {
    property: value;
}

다음은 위의 코드를 실제로 적용한 예제입니다:

<!DOCTYPE html>
<html>

<head>
  <style>
    div>a {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <a href="#">I am a link</a>
    <a href="#">I am a link</a>
    <p>
      <a href="#">I am a link inside a paragraph</a>
    </p>
  </div>
</body>

</html>

위의 예제를 실행하면 다음과 같은 결과를 볼 수 있습니다:

General sibling combinator

일반 형제 연결자는 같은 레벨에 있는 형제 요소를 선택합니다.

첫 번째 요소의 뒤에 위치하는 두 번째 요소를 지정할 수 있습니다. 여기서 두 번째 요소는 첫 번째 요소의 바로 뒤에 위치할 필요는 없습니다.

일반 형제 연결자를 사용하려면 첫 번째 요소를 지정한 다음 ~ 문자를 넣고 두 번째 요소를 지정합니다. 다음의 예제를 보겠습니다:

<!DOCTYPE html>
<html>

<body>
  <div>
    <p>I am paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
  <h3>I am a level three heading</h3>
  <p>I am a paragraph outside a div</p>
</body>

</html>

<body> 요소의 첫 번째 자식 요소는 <div> 입니다. <div>는 <p>를 자식으로 가지고있고 형제 노드로 두 개의 <p>와 <h3>를 가지고있습니다.

따라서 <div> 요소의 형제인 <p> 요소를 선택하려면 다음과 같이 작성하면 됩니다:

div~p {
    property: value;
}

다음은 일반 형제 연결자를 사용한 실제 예제입니다:

<!DOCTYPE html>
<html>

<head>
  <style>
    div~p {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <p>I am paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
  <h3>I am a level three heading</h3>
  <p>I am a paragraph outside a div</p>
</body>

</html>

위의 코드를 실행하면 다음과 같은 결과가 나타납니다:

Adjacent sibling combinator

인접한 형제 연결자는 일반 형제 연결자 보다 더 구체적입니다. 이 선택자는 바로 뒤에 위치하는 형제 요소만 선택합니다.

인접한 형제 연결자를 사용하려면 기준 요소를 지정하고 + 문자를 넣은 다음 선택할 형제 요소를 지정합니다.

<!DOCTYPE html>
<html>

<body>
  <div>
    <p>I am paragraph inside a div</p>
  </div>
  <p>I am a paragraph outside a div</p>
  <h3>I am a level three heading</h3>
  <p>I am a paragraph outside a div</p>
</body>

</html>

위의 예제에서 <h3> 뒤의 <p>요소도 <div>의 형제 요소이지만 이는 <div> 요소의 인접한 형제 요소가 아닙니다. 따라서 <div> 요소 바로 다음에 오는 <p> 요소만 스타일을 적용하려면 다음과 같이 해야합니다:

div+p {
    property: value;
}

Pseudo-Class Selectors

수도 클래스 선택자는 특정 상태에 있는 요소를 선택합니다.

요소에 있을 수 있는 상태는 다음과 같습니다:

마우스 포인터가 요소 위에 올라갔을 때
해당 타입 별 첫 번째 위치에 있는 요소
브라우저 별 이전에 방문했던 링크
브라우저 별 아직 방문하지 않은 링크
체크박스/라디오 버튼이 선택 됨

수도 클래스 선택자는 콜론 : 문자로 시작하고 그 뒤에 요소의 상태를 반영하는 키워드를 넣습니다. 사용 구문은 다음과 같습니다:

element:pseudo-class-name {
    property: value;
}

Pseudo-Class Selectors for Links

다음은 링크 상태를 기반으로 하는 선택자들 입니다.

:link 선택자는 아직 방문하지 않은 링크에 스타일을 적용합니다.

a:link {
    property: value;
}

:visited 선택자는 이전에 방문했던 링크에 스타일을 적용합니다.

a:visited {
    property: value;
}

:hover 선택자는 마우스 포인터가 요소 위에 올라갔을 때 적용됩니다.

a:hover {
    property: value;
}

:focus 선택자는 사용자가 요소를 탭 했을 때 적용됩니다.

a:focus {
    property:value;
}

:active 선택자는 요소를 클릭한 후 마우스 버튼을 누르고 있는 상태에 적용됩니다.

a:active {
    property: value;
}

Pseudo-Class Selectors for Inputs

링크에 대해 사용하는 :focus 선택자는 input에도 사용할 수 있습니다.

input:focus {
    property: value;
}

:required 선택자는 필수 input 필드를 선택합니다. 필수 input 필드는 required 속성을 가지고 있습니다.

input:required {
    property: value;
}

:checked 선택자는 체크박스나 라디오 버튼이 선택됐을 때를 의미합니다.

input:checked {
    property:value;
}

:disabled 선택자는 비활성화된 input 필드를 선택합니다. 비활성화된 input 필드는 disalbed 속성을 가지고 있습니다. 대부분 브라우저의 비활성화된 input의 기본 스타일은 연한 회색입니다.

input:disabled {
    property:value;
}

Pseudo-Class Selectors for Position

첫 번째 자식 선택자 :first-child는 부모 컨테이너 내부의 첫 번째 자식 요소를 선택합니다.

다음은 부모 컨테이너의 첫 번째 자식 요소를 선택하는 방법입니다:

a:first-child {
    property: value;
}

마지막 자식 선택자 :last-child는 부모 컨테이너 내부의 마지막 자식 요소를 선택합니다.

부모 컨테이너의 마지막 자식 요소를 선택하는 방법은 다음과 같습니다:

a:last-child {
    property: value;
}

:nth-child() 선택자는 컨테이너 내부의 자식 요소의 위치에 따라 선택합니다.

a:nth-child(n) {
    property: value;
}

:nth-child() 선택자는 위치가 짝수거나 홀수인 요소를 선택할 때에도 유용합니다.

a:nth-child(even) {
    property: value;
}

:first-of-type 선택자는 상위 컨테이너에서 특정 타입의 첫 번째 요소를 선택합니다.

다음은 <div> 내의 첫 번째 <p>를 선택하는 방법입니다:

p:first-of-type {
    property: value;
}

이와 반대로 :last-of-type 선택자는 특정 타입의 마지막 요소를 선택합니다.

다음은 <div> 내의 마지막 <p>를 선택하는 방법입니다:

p:last-of-type {
    property: value;
}

Pseudo-Element Selectors

수도 요소 선택자는 요소의 특정 부분에 스타일을 적용합니다. 이를 사용하여 새 콘텐츠를 삽입하거나 콘텐츠의 특정 섹션의 모양을 변경할 수 있습니다.

예를 들어 수도 요소를 사용하여 요소의 첫 글자 또는 첫 줄의 스타일을 다르게 지정할 수 있습니다. 또한 선택한 요소의 앞이나 뒤에 새로운 콘텐츠를 추가할 수 있습니다.

:로 콜론을 한 개 쓰는 수도 클래스와는 달리 수도 요소는 ::로 콜론을 두 개 씁니다. 두 개의 콜론 뒤에 선택한 요소의 특정 부분에 해당하는 키워드가 옵니다.

element::pseudo-element-selector {
    property:value;
}

수도 요소 선택자를 사용할 때 : 대신 ::을 사용해야 합니다. 이렇게 하여 수도 클래스와 수도 요소를 구분합니다.

이제 일반적으로 사용하는 수도 요소를 알아보겠습니다.

The ::before Pseudo-Element

::before 수도 요소를 사용하여 요소 앞에 콘텐츠를 삽입할 수 있습니다.

p::before {
    property: value;
}

The ::after Pseudo-Element

그리고 ::after 수도 요소를 사용하여 요소 끝에 콘텐츠를 삽입할 수 있습니다.

p::after {
    property: value;
}

The ::first-letter Pseudo-Element

::first-letter 수도 요소를 사용하여 단락의 첫 글자를 선택할 수 있습니다. 이는 문장의 첫 번째 글자의 스타일을 지정할 때 유용합니다.

p::first-letter {
    property: value;
}

The ::first-line Pseudo-Element

::first-line 수도 요소를 사용하여 단락의 첫 번째 줄을 선택할 수도 있습니다.

p::first-line {
    property: value;
}

querySelector, querySelectorAll 자바스크립트 요소 찾기