[CSS] 가상 요소, 가상 클래스

그동안 별 생각없이 즐겨 사용하던 ::after, ::before (가상요소)에 대해 다시 생각하게 되었습니다.

다시 생각하게 된 계기는 아래 글에 포스팅 되어 있습니다.

https://yeoninim.tistory.com/54

[CSS] float 속성 해제 방법(overflow:hidden, ::after)

 

어쨋든...이번 계기로 가상요소에 대해 자세히 공부하게 되었네요..

덕분에 몰랐던 선택자도 발견 하게되었습니다.

 

가상 요소

종류	예시	설명
::first-line	p:first-line { color:red; }	문단의 첫 줄에 컬러색을 빨간색으로 변경합니다.
::first-letter	p:first-letter { color:red; }	문단의 첫 글자에 컬러색을 빨간색으로 변경합니다.
::before	p:before { content:"시작" }	문단 시작 부분에 '시작'이라는 요소를 추가합니다.
::after	p:after { content:"끝" }	문단 끝 부분에 '끝'이라는 요소를 추가합니다.
::selection	p:selection { color:red; }	드래그로 선택하였을 경우 글씨 색을 빨간색으로 변경합니다.

::first-line, ::first-letter, ::selection 이 세가지 가상요소는 처음 봤습니다.

::first-line 의 경우는 잘 사용하지 않을 것 같고 ::first-letter 의 경우는 디자인적으로 쓸일이 있을 것 같네요.

 

그리고 더블콜론::( ::before, ::after ) 과 싱글콜론:( :before, :after )의 차이를아시나요??

더블콜론의 경우 CSS3부터 사용 되어 왔고 싱글콜론은 CSS2까지 사용 되어왔다고 합니다.

실제로 CSS3를 지원 하지 않는 IE8의 경우는 싱글콜론만 지원된다고 합니다.

 

최신 기술이니 더블콜론만 사용하야여 하느냐....는 아닙니다.

저는 싱글콜론만 사용하고 있습니다. IE 구버전을 신경 써야 하기 때문에 어쩔 수 없긴 한데요.

싱글콜론은 구 버전 브라우저는 물론 최신 브라우저 까지 인식한다고 하니 IE 구 버전을 신경 쓰셔야 한다면 싱글콜론으르 사용 하셔도 될 것 같습니다.

 

가상클래스

종류	예시	설명
:first-child	li:first-child { color:red; }	li 자식 요소 중 첫 번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:last-child	li:last-child { color:red; }	li 자식 요소 중 마지막 번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:first-of-type	p:first-of-type { color:red; }	자식 요소 중 p 태그 첫 번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:last-of-type	p:last-of-type { color:red; }	자식 요소 중 p 태그 마지막 번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:nth-child(n)	li:nth-child(n) { color:red; }	li 자식 요소 중 n번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:nth-last-child(n)	li:nth-last-child(n) { color:red; }	li 자식 요소 중 뒤에서 n번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:nth-of-type(n)	p:nth-of-type(n) { color:red; }	자식 요소 중 p 태그 n번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:nth-last-of-type(n)	p:nth-last-of-type(n) { color:red; }	자식 요소 중 p 태그 뒤에서 n번째 자식 요소에게 컬러를 빨간색으로 변경합니다.
:only-child	:only-child { color:red; }	자식 요소 중 유일한 태그 자식 요소에게 컬러를 빨간색으로 변경합니다.
:only-of-type	p:only-of-type { color:red; }	자식 요소 중 유일한 p 태그 자식 요소에게 컬러를 빨간색으로 변경합니다.
:not()	li:not(:nth-child(n)) { color:red; }	li 자식 요소 중 n번째 자식 요소를 제외하고 컬러를 빨간색으로 변경합니다.
:root	:root { color:red; }	기본 루트 요소의 컬러를 빨간색으로 변경합니다.
:empty	:empty { color:red; }	컨텐츠 요소가 없는 요소의 컬러를 빨간색으로 변경합니다.

:only-child 와 :only-of-type 는 저는 처음 알았습니다. 공부할 게 또 하나 늘었네요..

 

 

계층 선택자

종류	예시	설명
하위 선택자(Descendant Selector)	div p { color:red; }	div 태그의 모든 자식 중 p 태그를 모두 선택하여 글씨 색을 빨간색으로 변경합니다.
자식 선택자(Child Selector)	div > p { color:red; }	div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택하여 글씨 색을 빨간색으로 변경합니다.
형제 선택자(sibling Selector)	div ~ p { color:red; }	div 태그의 인접한 형제 p 태그를 모두 선택하여 글씨 색을 빨간색으로 변경합니다.
인접 형제 선택자 (Adjacent Sibling Selector)	div + p { color:red; }	div 태그의 인접한 형제 첫번째 p 태그를 선택하여 글씨 색을 빨간색으로 변경합니다.

이 중에서 형제 선택자와 인접 형제 선택자는 체크박스로 스위치모양 디자인 할 때 나 체크박스를 이용해 탭디자인을 만들때 사용 해본 경험이 있습니다.

 

속성 선택자

종류	예시	설명
[name]	a[href]	a 태그 속성 중에 href가 있으면 선택합니다.
[name="value"]	a[href="#header"]	a 태그 href 속성의 값이 '#header'이면 선택합니다.
[name~="value"]	a[href~="web"]	a 태그 href 속성의 값이 'web'을 포함한 요소를 선택합니다.
[name|="value"]	a[href|="web"]	a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소를 선택합니다.
[name^="value"]	a[href^="web"]	a 태그 href 속성의 값이 'web'으로 시작하는 태그를 선택합니다.
[name*="value"]	a[href*="web"]	a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다.
[name$="value"]	a[href$="com"]	a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니다.

속성 선택자는 반이상은 사용 안해본 선택자 이네요. 뭔가 유용하게 쓰일 수 있을 것 같습니다.

 

이외에도 제가 알지 못하는 요소들이 많이 있더라구요.

검색하면서 정리가 잘 되어 있는 분의 블로그를 찾아서 좀 베껴왔습니다.

 

아래 주소로 가시면 더 많은 내용들이 정리 되어 있습니다.

https://webzz.tistory.com/357

[CSS] 선택자