CSS 선택자
:nth-child(N) => 부모 안에 모든 요소 중 N번째 요소
ex)
- :nth-child(1) => 첫번째 선택
- :nth-child(2n) => 두번째 마다 선택
- :nth-child(2n+1) => 첫번째 요소부터 2번째 마다 선택
- :nth-child(2n+5) => 다섯번째 부터 2개 마다 선택
- :nth-child(n+5) => 5번째 부터 모두 선택
- :nth-child(odd) => 홀수 선택
- :nth-child(even) => 짝수 선택
A:nth-of-type(N) => 부모 안에 A라는 요소 중 N번째 요소
ex)
- p:nth-of-type(1) => 부모 안에 요소 중 첫번째 p요소 선택
- p:nth-of-type(2n+1) => 부모 안에 p요소 중 첫번째부터 2번째마다 선택
- p:nth-of-type(n+2):nth-of-type(-n+5) => 선택자를 두 번 사용하여 교집합인 요소만 선택할 수 있다.
nth-child와 마찬가지로 모든 선택자 속성을 사용할 수 있지만, nth-of-type은 모든 속성이 아닌 선택한 요소 중에서 선택을 한다.
:first-child => 부모 안에 모든 요소 중 첫 번째 요소
ex)
- :first-child => 부모 안에 모든 요소 중 첫번째 요소 선택
:last-child => 부모 안에 모든 요소 중 마지막 요소
ex)
- :last-child => 부모 안에 모든 요소 중 마지막 요소 선택
- A:first-of-type => 부모 안에 A라는 요소 중 첫 번째 요소
ex)
- p:first-of-type => 부모 안에 모든 p요소 중 첫번째 p요소 선택
- A:last-of-type => 부모 안에 A라는 요소 중 마지막 요소
ex)
- span:last-of-type => 부모 안에 모든 span요소 중 마지막 span요소 선택
id 선택자
- 동일한 이름 사용이 불가능 (제한적)
- 한 곳에만 적용해서 사용
- css 표시 :
#이름
CSS
#a {
}class 선택자
- 동일한 이름 사용 가능 (중복 허용)
- 동일한 여러 곳에 적용해서 사용
- css 표시 :
.이름
CSS
.a {
}
.a.b{
}