CSS #2 선택자

선택자는 효과와 함께 CSS에서 중요한 개념 중 하나.

​

<a href="~~" class="saw">

1. 태그의 class를 saw라고 지정 (html)

클래스, 또는 Grouping

​

2. head의 style 내

.saw{

color:gray;

}

이때 '.'은 다음에 오는 이름은 class임을 가리킨다. (선택자)

​

3.<a.. class="saw active">라고 작성 시

이 태그는 saw, active 클래스 모두에게 속한다는 것을 의미. (띄어쓰기로 구분)

head의 style 내

.saw{

color:gray;

}

.active{

color:red;

}

라고 작성시 빨간색으로 바뀐다. (절차지향적)

​

결국 클래스는 하나의 태그에 여러 개 지정이 가능, 띄어쓰기로 구분, 여러 개의 선택자로 제어가 가능.

​

위 예시는 좋은 예시가 아니다.

.saw가 먼저냐, .active가 먼저냐에 따라 색이 바뀌기 때문.

우선순위가 더 높은 id를 사용.

​

<a .. class="saw" id="active">

지정 후

head의 style 내

#active{

color:red

}

.saw{

color:gray;

}

작성 시 saw가 가장 최근임에도 빨간색이 된다.

(#은 id의 선택자)

​

우선순위 : #(id) > .(class) > (일반태그명)

구체성 : #(id) > .(class) > (일반태그명)

포괄성 : (일반태그명) > .(class) > #(id)

​

이 때, id 값은 유일무이해야 한다.