:nth-child 문제! 선택자문제 ㅠ 급해요
본문
포트폴리오 게시판 리스트 제작중인데.
div:nth-child(2n) 이 선택자가 CSS3라 IE9~ 부터 먹히네요
IE8에도 적용시킬 수 있는 핵이나 . 방법없을까요?
div+div+div 이거 있다던데 이런거라도.... 부탁드립니다.
답변 3
$i 값을 클래스로 만들어서 붙여준 다음 식별할 수도 있습니다. 일종의 grid 방식인데요.
for ($i=0; $i<count($list); $i++) {
if ($i == 0) $res_i = 1;
else {
if ($res_i < 12) $res_i += 1;
else if ($res_i == 12) $res_i = 1;
}
?>
<li class="li<?php echo $res_i; ?>">
위와 같이 하면 li 에 1~12까지 반복적으로 클래스가 붙습니다.
12를 2로 바꾸면 1과 2가 반복되면서 붙겠죠. (홀짝) 다음처럼 활용하시면 됩니다.
<style>
.li1 {~} // 홀에 해당하는 내용
.li2 {~} // 짝에 해당하는 내용
</style>
예제에서 12를 사용한 이유는, 2,3,4,6,12 의 최소공배수이기 때문입니다.
한 행에 2개, 3개, 4개, 6개, 12개를 표현하는 갤러리에 모두 사용할 수 있습니다. (반응형)
위 style 의 주석 부분은 이 게시판에서 보이지 않기 때문에 부득이하게 다른 방법으로 표시한 것입니다.
제이쿼리를 이용하시면 됩니다~
<script type="text/javascript">
$(document).ready(function(){
$('div:nth-child(even)').css('color','red');
});
</script>
이런식으로...odd가 홀수 even이 짝수예요
감사합니다 .
답변을 작성하시기 전에 로그인 해주세요.
