CSS3에서는 :nth-child(n) 선택자를 사용하여 여러 개의 항목이 일렬로 나열되어 있는 경우,
class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용할 수 있습니다.
Markup
- <ul class="list">
- <li>첫번째 글</li>
- <li>두번째 글</li>
- <li>세번째 글</li>
- <li>네번째 글</li>
- <li>다섯번째 글</li>
- <li>여섯번째 글</li>
- <li>일곱번째 글</li>
- <li>여덟번째 글</li>
- </ul>
1. 원하는 자식을 숫자로 선택할 수 있습니다.
· 다섯번째 글 선택하기
– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자‘를 써줍니다.
- .list li:nth-child(5) {
- background-color: #ffff00;
- }
· 3의 배수로 선택하기
– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자 + n‘을 써줍니다.
- .list li:nth-child(3n) {
- background-color: #ffff00;
- }
· 두번째 글 선택 후 3의 배수로 선택하기
- .list li:nth-child(3n + 2) {
- background-color: #ffff00;
- }
2. 홀수와 짝수로 선택할 수 있습니다.
· 홀수 선택하기
– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘odd‘라고 써줍니다.
- .list li:nth-child(odd) {
- background-color: #ffff00;
- }
· 짝수 선택하기
– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘even‘이라고 써줍니다.
- .list li:nth-child(even) {
- background-color: #ffff00;
- }
3. 뒤에서부터 선택할 수 있습니다.
· 뒤에서 두번째 글(일곱번째 글) 선택하기
– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-last-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자‘를 써줍니다.
- .list li:nth-last-child(2) {
- background-color: #ffff00;
- }
· 뒤에서 첫번째 글 선택 후 3배수로 선택하기
- .list li:nth-last-child(3n + 1) {
- background-color: #ffff00;
- }
출처 : http://mylife365.tistory.com/252
'프로그래밍 > css' 카테고리의 다른 글
[CSS] nth-child (n번째 부터 n번째 까지 css적용) (0) | 2018.04.05 |
---|---|
IE8에서도 되는 라운딩 (0) | 2018.03.02 |
로딩중입니다 (0) | 2018.02.28 |