i'm working on it
Home
  • 분류 전체보기 (44)
    • 工夫 (39)
      • HTML+CSS (8)
      • JAVASCRIPT+JQUERY (8)
      • LINUX+ETC (0)
      • PHP (10)
      • MYSQL (0)
      • python (0)
      • ETC (13)
    • 希望 (5)
      • a place to go (0)
      • what to buy (5)
    • 情報 (0)
      • 갑상선기능저하증 (0)
      • 레시피 (0)
      • 운동 (0)
    • 日常 (0)
    • 寫眞 (0)
    • 徽晛 (0)
Home
  • 분류 전체보기 (44)
    • 工夫 (39)
      • HTML+CSS (8)
      • JAVASCRIPT+JQUERY (8)
      • LINUX+ETC (0)
      • PHP (10)
      • MYSQL (0)
      • python (0)
      • ETC (13)
    • 希望 (5)
      • a place to go (0)
      • what to buy (5)
    • 情報 (0)
      • 갑상선기능저하증 (0)
      • 레시피 (0)
      • 운동 (0)
    • 日常 (0)
    • 寫眞 (0)
    • 徽晛 (0)
블로그 내 검색

i'm working on it

사진, 캠핑을 좋아하는 휘현/휘흔 아빠의 Life Log입니다

  • 工夫/HTML+CSS

    [CSS] :nth-child() 의 다양한 용례

    2021. 5. 19.

    by. 휘현아빠

    /* 3, 6, 9, 12 번째(3의배수) 배경변경 */ 
    li:nth-child(3n){ background: red; } 
    
    /* 10번째 부터 이후 모든 리스트 컬러변경 */ 
    li:nth-child(n+10) { color: blue; } 
    
    /* 1번째 부터 5번째 까지 배경변경 */ 
    li:nth-child(-n+5) { background: green; } 
    
    /* 15번째 부터 20번째 까지 배경변경 */ 
    li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } 
    
    /* 끝에서 부터 3번째 */ 
    li:nth-last-child(3) { background: gold; } 
    
    /* 홀수 */ 
    li:nth-child(odd) { color: red; } 
    
    /* 짝수 */ 
    li:nth-child(even) { color: red; }
    저작자표시 비영리 변경금지

    '工夫 > HTML+CSS' 카테고리의 다른 글

    [CSS] 언어별 줄바꿈 word-wrap / word-break  (0) 2022.02.09
    [HTML] 카카오톡 URL 공유시 미리보기 메타태그작성  (0) 2022.02.06
    [CSS] FLEX 의 기본사용법  (0) 2021.05.19
    [HTML] 크롬 자동번역창을 띄우지 않기  (0) 2021.05.12
    [CSS] 모바일에서 뷰포트에 따른 폰트 사이즈 자동 조정 방지  (0) 2021.05.12

    댓글

    관련글

    • [CSS] 언어별 줄바꿈 word-wrap / word-break 2022.02.09
    • [HTML] 카카오톡 URL 공유시 미리보기 메타태그작성 2022.02.06
    • [CSS] FLEX 의 기본사용법 2021.05.19
    • [HTML] 크롬 자동번역창을 띄우지 않기 2021.05.12
    맨 위로
전체 글 보기
Tistory 로그인
Tistory 로그아웃
로그아웃 글쓰기 관리

Today

Total

Powered by ⓒ Kakao Corp.

Designed by Nana & Custom ing
블로그 이미지
휘현아빠

티스토리툴바