사이트 내 전체검색
HTML,CSS,레이아웃
0 (/P)
<CSS>순서를 이용한 선택자 : nth / first or last-child
하우코드
https://tto.kr/tip_html/294 URL이 복사되었습니다.

본문

클래스or태그명:nth-child(number) {}


클래스or태그명:first-child {}


클래스or태그명:last-child {}


 

홀수번째와 짝수번째 선택자 : nth-child(odd or even)



.tbl_yun li:nth-child(odd) {

border-left: solid 2px #AAA !important;

}


.tbl_yun li:nth-child(1) {

border-left: 0 !important;

}


/* 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; 
출처: https://hohoya33.tistory.com/99 [개발 메모장:티스토리]

댓글목록

등록된 댓글이 없습니다.

HTML,CSS,레이아웃
287 (1/12P)

Search

Copyright © 하우코드 44.192.247.184