CSS 강좌 | 선택자 > 클래스 선택자(Class Selector)

클래스 선택자

클래스 선택자(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>

는 선택됩니다.

예제 1

class 값으로 abc를 갖는 요소는 파란색으로, class 값으로 xyz를 갖는 ul 요소는 빨간색으로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .abc {
        color: blue;
      }
      ul.xyz {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="abc">Lorem</h1>
    <p class="abc def">Phasellus lacinia tempus mauris eu laoreet.</p>
    <ul class="xyz">
      <li>Dolor</li>
      <li>Amet</li>
    </ul>
    <p class="xyz">Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
  </body>
</html>

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

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

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

이 경우 CSS 코드 순서대로 적용됩니다.

예제 2

<!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>

클래스 속성의 값을 abc xyz로 하든 xyz abc로 하든, CSS에서 .abc를 먼저 .xyz를 나중에 정의했으므로 .xyz가 적용됩니다.

Category

Created on 2017-02-07 12:13 | Updated on 2017-02-10 11:28

이 글을 공유하기

Kakao