css nth-child 선택자 first-child, last-child 선택자



프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[CSS] css nth-child 선택자 first-child, last-child 선택자

2018.09.20
html 문서에서 같은 형태의 요소들이 반복될때, 그리고 이요소들을 특정 순서에 따라 CSS속성을 다르게 지정하고 싶을때 nth-child 선택자를 사용해서 해결 할 수 있다.

child 선택자의 종류는 여러가지가 있다.
가장 많이 선택하는 선택지가 nth-child 선택자이며, only-child, first-child, last-child, nth-last-child 가 있다.

** 같은 종류(type)의 요소에서만 적용 된다.



nth-child 선택자의 다양한 표현들
nth-child 선택자를 사용할 때 단순히 괄호 안에 숫자만 넣을 경우 선택되는 요소는 1개 뿐이다.
숫자 외 표현을 넣어 다양한 선택을 할 수 있다.


** first-child 선택자
이름에서 알 수 있듯이 첫번째 ㅈ식요소를 선택된 요소를 선택한다는 뜻이다. 이 선택자와 nth-child(1)는 동일하다.


** last-child 선택자
마지막 자식요소를 선택한다는 뜻이다. first, last 모두 nth-child와 적용방법은 동일하고, 단지 first는 첫 번째 자식, 마지막 자식의 선택으로 한정 된 것이다.


** nth-child(odd)
홀수 번째 자식만 선택한다.

** nth-child(even)
짝수 번째 자식만 선택한다.

** nth-child(n+0)
n+0 번째 자식을 선택한다. 이때 n의 값은 0 부터 시작해서 증가한다. 그리고 +0에 숫자는 0대신 사용자가 직겁 다양하게 지정하면 된다.


** nth-child(-n+0)
-n+0 번째 자식을 선택하면 역시 n은 0부터 시작해서 증가한다.

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 324
중요 [소스] 메뉴바 UI 소스1 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.04.02 3646
중요 [소스] jquery 달력 Datepicker  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.11.02 2946
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.02.10 73
중요 [소스] [소스] 메뉴바 UI 소스2 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2016.07.19 6059
중요 [기타] 구글맵 플랫폼  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.22 4627
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.18 5089
중요 [소스] 구글맵 좌표값 구하기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.08 3367
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 21868
중요 [소스] 제시어기능 자동완성 검색  이미지 파일이 첨부되어 있습니다. 꿘쓰 2011.05.18 2429
232 [소스] 슬라이드 배너 Swiper Slide 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.06 0
231 [소스] gnb 메뉴 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.02 0
230 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 324
229 [소스] Mouse Scroll Dwon 꿘쓰 2021.03.08 144
228 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 350
225 [소스] Window.scroll() 꿘쓰 2020.06.22 280
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 2
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 274
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 342
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 681
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 561
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 740
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 882
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 819
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 1104
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1