CSS Selectors - 가상(Pseudo) 클래스 1 - child 와 siblings 선택

 

 

CSS Pseudo Selectors

 

---

 

• CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.
• 이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.
• 가상클래스(Pseudo Class)는 독립적으로 사용하기 보다, 특정한 태그 뒤에 붙어서 보통 사용하게 됩니다.
• CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~!

 

저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~
https://www.w3schools.com/cssref/css_selectors.php

 

Welcome to CODING HELL

CSS  Syntax 

CSS 기본 선언 방법

 

A. Pseudo Class(수도클래스, 가상클래스)

수도클래스는 콜론으로 시작하며, 원래의 문법은 콜론 두개 '::'로 시작하는 것이지만, 한개 ':'로 많이 사용됩니다.

하지만 꼭 '::' 두개를 적어야 하는 클래스도 간혹 있으니 알아두세요~

 

B.  자식요소 선택자

- 누군가의 자식요소인 경우에만 선택의 대상이 된다.

Selector	사용 예	선택 Child	Description
:first-child	li:first-child { color: tomato }	첫번째	누군가의 첫번째 자식요소인데 li태그인 경우
:last-child	li:last-child { color: tomato }	마지막	누군가의 마지막 자식요소인데 li태그인 경우
:nth-child(n)	li:nth-child(3) { color:tomato }	3번째	3번째 li태그
	li:nth-child(odd)	홀수번째 모두	홀수번째 li 태그들
	li:nth-child(even)	짝수번째 모두	짝수번째 li 태그들
	li:nth-child(3n)	3의 배수번째 모두
	li:nth-child(3n-1)	3의 배수에서 하나뺀 위치에 있는 것 모두	2, 5, 8, 11, 14...등의 순으로 진행
:nth-last-child(n)	li:nth-last-child(2)	뒤에서 부터 2번째	뒤에서부터 2번째 자식요소
:only-child	li:only-child	li	부모의 자식요소가 유일하게, 본인 혼자일때에 li태그가 선택된다.

 

C.  형제요소 선택자

- DOM 트리구조상 같은 부모를 가지고 있는 형제요소인 경우에만 선택의 대상이 된다.

Selector	사용 예	선택 Siblings	Description
:first-of-type	li:first-of-type { color: tomato }	첫번째	li중 첫번째 형제요소
:last-of-type	li:last-of-type { color: tomato }	마지막	li중 마지막 형제요소
:nth-of-type(n)	li:nth-of-type(3) { color:tomato }	3번째	3번째 li 형제 태그
	li:nth-of-type(odd)	홀수번째 모두	홀수번째 li 형제 태그들
	li:nth-of-type(even)	짝수번째 모두	짝수번째 li 형제 태그들
	li:nth-of-type(3n)	3의 배수번째 모두
	li:nth-of-type(3n-1)	3의 배수에서 하나뺀 위치에 있는 것 모두	2, 5, 8, 11, 14...등의 순으로 진행
:nth-last-of-type(n)	li:nth-last-of-type(2)	뒤에서 부터 2번째	뒤에서부터 2번째 형제요소
:only-of-type	p:only-of-type	p	여러 형제들이 있지만 p태그가 본인 혼자일때에 선택된다. only-child와는 다르니 주의

 

---

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.