css 셀렉터 문법
1. 공백으로 지칭
.navbar li {
}
이 말은 navbar라고 명명된 태그 안에 모든 <li>태그들에게 모두 적용시킬 꺼야 라는 의미.
모든 자손 태그 적용.
2. > 으로 지칭
.navbar>li {
}
이 말은 navbar라고 명명된 태그 안에 직계 <li> 태그들만 적용시킬꺼야 라는 의미.
직계 자손 태그만 적용.
3. nth-child(몇번째) 이렇게도 지칭 가능
nth-child(n) 셀렉터. = n번째 등장하는 요소만 스타일링 할때 쓴다.
.class명 자식태그 nth-child(몇번째){
}
일일이 class명을 붙이지 않아도 이렇게 쓸수 있다는 점 알아두기
테이블에서 원하는 순서의 셀에 스타일줄 때 가끔 유용하게 사용합니다.
숫자 대신even 라고 쓰면 짝수인 애들만,
odd 라고 쓰면 홀수인 애들만 말하는 것
3n+1 이렇게 넣으면, 3의 배수+1 인 애들만 말하는 것
4. 여러개를 지칭하고 싶을때
만약 class로 이름 지은거 여러개를 지칭하고 싶을때
.btn-id, .btn-pw{
}
그게 아니라 태그 그 자체로 여러개를 지칭하고 싶을때
tr, a{
}
참고로
한개의 태그에 여러개의 class명 넣기.
띄워쓰기를 통해서 가능하다.
<div class ="apple kiwi">
참고로
class로 이름 지어준 애는 . 으로 호출
id 이름으로 호출 할꺼면 # 으로 호출
태그 그 자체로 호출할꺼면 아무것도 없이 태그 이름만 쓰면 됨.