[HTML / CSS] 선택자 정리

1. 태그 이름

<h1>Heading 1</h1>
<h2>Heading 2</h2>

 

2. 클래스 / 아이디

클래스로 싸집어 주고 id로 부분 설정하기

 

3. 자식(children)

div안의 i가 붙은 곳에 모두 orange 속성을 부여

 

4. 직속 자식(direct children)

/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

위의 CSS에서 div 뒤에 ">"가 붙는다. 이는 직속 자식 (자신의 자식중 최상위에 있는 자식)

위의 결과로는 3, 5번째 줄 inside 1과 inside 3는 orange 속성이 붙여지지만 

<p>안에 <i>가 들어있는 inside 2는 직속 자식관계가 아니므로 아무 속성도 부여되지 않는다.

 

5. 복수 선택

콤마를 이용해서 한 클래스안에 여러 클래스를 부여하는 것이 된다.

 

6. 여러 조건

/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}

/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}

 

7.  pseudo-class(가상 클래스)

콜론(:)을 사용하면 몇 가지 '가상 클래스'를 선택할 수 있다.

 

8. 마우스 오버(hover)

마우스를 올렸을 때 색깔이 바뀌게끔 할 수 있다. 또는 그림자 처리를 한다던지 추가 데코레이팅이 가능하다.