[HTML+CSS] 구조 선택자, 형태 구조 선택자, 문자선택자 , 반응 문자 선택자

선택자	설명
:first-child	형제 관계 중에서 첫 번째에 위치하는 태그를 선택
:last-child	형재 관계 중에서 마지막에 위치하는 태그를 선택
:nth-child(수열)	형제 관계 중에서 앞에서 수열 번째에 태그를 선택
:nth-last-child(수열)	형제 관계 중에서 뒤에서 수열 번째에 태그를 선택

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

선택자	설명
:first-of-type	형제 관계 중에서 첫 번째로 등장하는 특정 태그를 선택함
:last-of-type	형제 관계 중에서 마지막으로 등장하는 특정 태그를 선택함
:ntn-of type(수열)	형제 관계 중에서 앞에서 수열번재로 등장하는 특정 태그 선택
:ntn-last-of-type(수열)	형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그 선택

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

시작 문자 선택자 

 

▶ 시작 문자 선택자는 태그 내부의 첫 번째 글자와 줄을 고를 때 사용한 선택자임.

 

 

선택자	설명
::first-letter	첫 번째 글자 선택
::first-line	첫 번째 줄 선택

 

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

전후 문자 선택자

 

▶ 전후 문자 선택자는 특정 태긔 전후에 위치 공간 선택하는 선택자

 

선택자	설명
::after	태그 뒤에위치하는 공간 선택
::before	태그 앞에 위치하는 공간 선택

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

반응 문자 선택자

 

▶  사용자가 문자와 반응해서 생기는 영역 선택 하는 선택자

 

 

선택자	설명
::section	사용자가 드래그한 글자 선택

 

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

작성된 글을 드래그 해보면 적용된 css가 반영이 된 것을 확인해 볼 수 있다.