CSS / 선택자(Selector) / 아이디 선택자, 클래스 선택자

아이디 선택자

아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. 예를 들어

#abc {
  color: red;
}

는 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

클래스 선택자

클래스 선택자

클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어

.abc

는 class 속성값으로 abc를 갖는 요소를 선택합니다.

클래스 선택자 앞에 아무 것도 없으면

클래스 선택자 앞에 아무 것도 없으면 그 값을 갖는 모든 요소를 선택합니다. 즉 .abc는 *.abc와 같은 의미로

<h1 class="abc">Lorem</h1>
<p class="abc">Lorem</p>

모두 선택합니다.

클래스 선택자 앞에 무언가 있으면

클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다. 예를 들어

p.abc

는 class 값으로 abc를 갖는 p 요소를 선택합니다. 이렇게 하면

<h1 class="abc">Lorem</h1>

은 선택되지 않고,

<p class="abc">Lorem</p>

는 선택됩니다.

클래스 속성의 값이 여러 개이면

class 속성은 여러 개의 값을 가질 수 있습니다.

<p class="abc xyz">Lorem</p>

이 경우 CSS에 정의된 순서대로 적용됩니다. 예를 들어 다음의 두 문단은 모두 빨간색으로 나옵니다. CSS에서 .abc를 먼저 .xyz를 나중에 정의했기 때문입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
      .abc {color: blue;}
      .xyz {color: red;}
    </style>
  </head>
  <body>
    <p class="abc xyz">Lorem Ipsum Dolor.</p>
    <p class="xyz abc">Lorem Ipsum Dolor.</p>
  </body>
</html>

CSS 강좌