[ CSS ] 선택자 : first-child / last-child / nth-child / nth-last-child / nth-last-child // div, ul, li 위치 순서

http://535bo3ob.blog.me/220270788058



선택자의 종류 
◆ nth-child(odd) - 홀수
◆ nth-child(even) - 짝수
◆ nth-child(숫자n+a) - 숫자 X n ( n은 0부터 무한대 ) + a
◆ first-child - 첫번째
◆ last-child - 마지막
◆ nth-last-child(숫자) - 마지막에서 몇번째

1. 홀수, 짝수, 첫번째, 마지막, 마지막에서 몇번째 까지의 html 

<style>
.song1 {background:#ededed; width:100px; height:100px; float:left; margin-left:50px;}
.song1:nth-child(홀수,짝수,첫번째,마지막,마지막몇번) {background:#0F0;}
</style>

<div class="song1"></div>
<div class="song2"></div>
<div class="song3"></div>
<div class="song4"></div>

배열숫자(1)일 경우, 배경을 초록색으로 변경해라 라고 설정을 했을때 결과
이때, 배열숫자를 다른걸로 변경해주시면 다른 사각형도 효과를 볼 수 있습니다.






이부분이 가장 복잡한데요. 보다보면 쉽습니다.
잘보시면, 한줄에 5개의 배열이 있는데요, 여기서 5번째 배열들만 효과를 주려고 하면
5n+5 라는 공식이 성립됩니다.

5n+5 = 5Xn (n은 0부터 무한대) +5 이기때문에 계산하면
1. n=0 일때 5 X 0 + 5 = 5
2. n=1 일때 5 X 1 + 5 = 10 ...
이 되는 것을 알 수 있습니다.


위와 같은 공식으로 대입해주시면, 몇번째 배열이든 반복적으로 쉽게 변경할 수 있습니다.
도형에만 적용이 되는것이아니라, 글자색 글자 모양 등 원하시는 것으로 변경 가능합니다.