가상 선택자

가상 클래스 선택자

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}​

 

a:link	링크가 걸린 문자에 속성을 부여하는 선택자
a:visited	링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자
a:hover	링크기 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자
a:active	링크가 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus	링크가 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자 (키보드의 [tab] 키 등으로 포커스가 나타날 경우)

See the Pen xxGVjGp by miae (@flato) on CodePen.

 

 

See the Pen PoqNVBK by miae (@flato) on CodePen.

See the Pen 간단한 툴팁 hover by miae (@flato) on CodePen.

 

---

CSS 가상요소 선택자

가상요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 잇는 선택자입니다.

:first-letter	요소의 첫글자
:first-line	요소의 첫줄
:first-child	같은 요소 중 첫번째 요소
:last-child	같은 요소 중 마지막 요소
:nth-child(n)	같은 요소 중 n번째 요소
:nth-child(2n)	같은 요소 중 2의 배수 요소
:nth-child(-n+5)	같은 요소 중 1번째부터 5번째까지 요소
:nth-child(n+5)	같은 요소 중 5번째 이후 모든 요소
:nth-child(n+5):nth-child(-n+10)	같은 요소 중 5번째부터 10번째까지 모든 요소
:nth-last-child(5)	같은 요소 중 마지막에서 5번째 요소
:nth-child(even)	같은 요소 중 홀수 요소
:nth-child(odd)	같은 요소 중 짝수 요소
:nth-of-type(n)	선택한 타입의 요소 중 n번째 요소
::before	요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소)
::after	요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소)

 

첫 번째 <p> 요소 선택

p:first-child {
  color: blue;
}

 

모든 <p> 요소에서 두 번째 <i> 요소 선택

p i:nth-child(2) {
  color: blue;
}

 

첫 번째 <p> 요소의 모든 <i> 요소 선택

p:last-child i {
  color: blue;
}

 

---

CSS 가상 엘리먼트 선택자

::before  ::after

• 마크업할 당시에는 없었던 요소를 CSS에서 넣어줄 때 사용
• 새로 생성된 공간에 내용을 넣어 줄때에는 content 속성을 이용하여 content=""와 같이 기술
• 선택한 요소의 자식 요소 맨 처음과 맨 마지막에 생성
• 생성된 가상 요소들은 인라인의 특성을 가짐

 

 

h1::before {
  content: '텍스트';
}

h1::after {
  content: url(https://www.w3schools.com/css/smiley.gif);
}

This is a heading