CSS 기초 공부

서식 적용 우선 순위 규칙 ** 

1) 가장 먼저 적용되는 우선 순위

상세하게 정의된 selector의 우선 순위가 높다.

 

태그명#id > 태그명.class > 태그명

tr#tr1 > tr.class > tr:hover > tr

 

부모 태그를 명시해준 것이 좀 더 상세하다

table tr > tr

 

table.table-hover tr > table tr > tr

 

2) 위 규칙에서 우선 순위가 같다면 그 다음 적용되는 우선 순위

인라인 > 내부 서식 > 외부 서식

 

3) 위 규칙에서 우선 순위가 같다면 그 다음 적용되는 우선 순위

소스 코드에서 앞 줄 보다 뒷 줄의 우선 순위가 높다

 

 

 

first-child, last-childe 와 nth-child, nth-of-type 정의

 

first-child는 (해당 아무거나(태그, 클래스):first-child  로 작성하고,

해당 아무거나의 첫 번째로 나오는 태그를 찾는다.

 

last-child는 (해당 아무거나(태그, 클래스):last-child  로 작성하고,

해당 아무거나의 마지막 번째로 나오는 태그를 찾는다.

 

번호는 1부터 시작한다.

nth-child는 (해당 아무거나(태그, 클래스):nth-child (번호, odd, even)  로 작성하고,

해당 아무거나의 (번호) 번째, 홀수, 짝수로 나오는 태그를 찾는다.

* 해당 (번호) 번째 태그가 다른 태그일 경우, CSS는 적용이 되지 않는다.

 

nth-of-type는 (해당 아무거나(태그, 클래스):nth-of-type(번호, odd, even)  로 작성하고,

해당 위치의 (번호) 번째, 홀수, 짝수로 번째로 나오는 태그를 찾는다.