[CSS]선택자, 가상클래스, cascade

1. 선택자 목록(selector list)
선택자1, 선택자2 ...{
  내용
}


2. 선택자 붙여 쓰기
태그선택자#id.클래스
.클래스.클래스
#id.클래스 등등 여러방법으로 쓸 수 있다.

붙어있는 선택자를 모두 가지고 있는 요소를 선택한다.
태그선택자가 포함되어있으면 태그선택자를 제일 앞에 둬야 한다.
아이디와 클래스는 순서가 상관없다.


3. 자식, 자손 선택하기
자식 결합자
부모 > 자식{

}

자손 결합자
조상 후손{

}


4. 가상 클래스

선택자::before 또는 선택자::after
css 속성 content를 꼭 써줘야 함
content: '';

선택자:hover
마우스를 올릴시의 스타일

선택자:active
클릭하고 있을 때의 스타일

선택자:focus
포커스가 적용될 때 스타일

선택자:visited
링크같은 곳에서 이미 방문했을 때의 스타일



5. nth-of-type  vs  nth-child
둘 다 부모의 자식요소에 대해 선택을 한다.

nth-child는 부모 요소의 모든 자식 중 타입과 순서가 맞아야 해당 요소를 선택
nth-of-type은 부모 요소의 자식중 해당 타입 중에서 선택

개발자 도구에서 태그 우클릭 force state로 사용가능한 가상 클래스를 볼수 있다.


6. cascade
css 적용 순서

인라인 스타일 : 가장 우선순위가 높다.
똑같은 선택자는 나중에 쓸수록 우선순위가 높다.
명시도(specificity)가 높을수록 우선순위가 높다.
아이디 100, 클래스 10, 태그1