css

CSS3 :nth-child(n) 선택자 (같은종류의 태그로 구성되어 있을 때 사용)

핑계/ editor

  • 2 comments
  • 10,653 views
  • 2017년 9월 1일

CSS3에서는 :nth-child(n) 선택자를 사용하여 여러 개의 항목이 일렬로 나열되어 있는 경우,
class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용할 수 있습니다.

Markup

  • 첫번째 글
  • 두번째 글
  • 세번째 글
  • 네번째 글
  • 다섯번째 글
  • 여섯번째 글
  • 일곱번째 글
  • 여덟번째 글

 

1. 원하는 자식을 숫자로 선택할 수 있습니다.


 

· 다섯번째 글 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자‘를 써줍니다.

 
.list li:nth-child(5) {
      background-color: #ffff00;
   } 

Welcome to Html5Around on html5around.com

 

· 3의 배수로 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자 + n‘을 써줍니다.

 
.list li:nth-child(3n) {
      background-color: #ffff00;
   } 

Welcome to Html5Around on html5around.com

 

· 두번째 글 선택 후 3의 배수로 선택하기

 
.list li:nth-child(3n + 2) {
      background-color: #ffff00;
   } 

Welcome to Html5Around on html5around.com

 

 

2. 홀수와 짝수로 선택할 수 있습니다.


 

· 홀수 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘odd‘라고 써줍니다.

 
.list li:nth-child(odd) {
      background-color: #ffff00;
   } 

Welcome to Html5Around on html5around.com

 

· 짝수 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘even‘이라고 써줍니다.

.list li:nth-child(even) {
      background-color: #ffff00;
   } 

Welcome to Html5Around on html5around.com

 

 

3. 뒤에서부터 선택할 수 있습니다.


 

· 뒤에서 두번째 글(일곱번째 글) 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-last-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자‘를 써줍니다.

 
.list li:nth-last-child(2) {
      background-color: #ffff00;
   } 

Welcome to Html5Around on html5around.com

 

· 뒤에서 첫번째 글 선택 후 3배수로 선택하기

 
.list li:nth-last-child(3n + 1) {
      background-color: #ffff00;
   } 

Welcome to Html5Around on html5around.com

핑계

댓글 먹고 살아요~

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
o.o오늘도너를 Recent comment authors
newest oldest most voted
오늘도너를
Member

감사합니다!!

o.o
Guest
o.o

감사합니다