[CSS] 선택자

선택자{
  요소;
}

적용시킬 대상을 선택자라고 한다.

선택자1, 선택자2{
  요소;
}

h2#선택자3.선택자4{
  요소;
}

 

위의 1번 코드는 선택자 1과 선택자 2는 동일한 요소를 적용받는다는 뜻이다. 

2번 코드는 h2이고 id가 선택자3이고 class가  선택자4인 요소에 적용한다는 뜻이다. id와 class의 순서는 바뀌어도 된다.

.부모선택자 > 자식선택자{
  요소;
}

.부모선택자 자손선택자{
  요소;
 }

자식 결합자, 자손 결합자 : 부모와 자식을 결합해주는 역할을 한다. 차이로는 자식결합자는 오직 자식 밖에 안 되고 자손 결합자는 안쪽 태그면 다 가능하다.

a:가상클래스{
  요소;
}

가상클래스(Pseudo-class) : 요소의 상태를 선택할 때 사용하는 클래스이다. 사용법은 정해진 이름 앞에 콜론(:)을 붙인다.

종류로는 :hover(마우스를 올렸을 때), :active(클릭한 상태), :visited(방문한 적이 있는 링크), :focus(포커싱 됐을 때) 등이 있다.