:nth-child 문제! 선택자문제 ㅠ 급해요

디자인오늘

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2014-03-13 (목) 18:07:00 5,954

포트폴리오 게시판 리스트 제작중인데.

div:nth-child(2n) 이 선택자가 CSS3라 IE9~ 부터 먹히네요

IE8에도 적용시킬 수 있는 핵이나 . 방법없을까요?

div+div+div 이거 있다던데 이런거라도.... 부탁드립니다.

그누보드4

답변 3개

채택된 답변

+20 포인트

탈퇴회원

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2014-03-13 (목) 18:26:14

$i 값을 클래스로 만들어서 붙여준 다음 식별할 수도 있습니다. 일종의 grid 방식인데요.

Copy

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가 반복되면서 붙겠죠. (홀짝) 다음처럼 활용하시면 됩니다.

Copy

<style>
.li1 {~} // 홀에 해당하는 내용
.li2 {~} // 짝에 해당하는 내용
</style>

예제에서 12를 사용한 이유는, 2,3,4,6,12 의 최소공배수이기 때문입니다.

한 행에 2개, 3개, 4개, 6개, 12개를 표현하는 갤러리에 모두 사용할 수 있습니다. (반응형)

위 style 의 주석 부분은 이 게시판에서 보이지 않기 때문에 부득이하게 다른 방법으로 표시한 것입니다.

forward

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2014-03-14 (금) 02:15:32

감사합니다 .

커네드커네드

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2014-03-13 (목) 18:15:12

제이쿼리를 이용하시면 됩니다~

$(document).ready(function(){

$('div:nth-child(even)').css('color','red');

});

</script>

이런식으로...odd가 홀수 even이 짝수예요

답변을 작성하려면 로그인이 필요합니다.

:nth-child 문제! 선택자문제 ㅠ 급해요

답변 3개

공유하기