Publishing/CSS3

가상 선택자

oodada 2020. 2. 17. 12:47

가상 클래스 선택자

/* 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

'Publishing > CSS3' 카테고리의 다른 글

CSS Web font  (0) 2020.02.20
CSS Fonts  (0) 2020.02.18
CSS 속성(Attribute) 선택자  (0) 2020.02.14
CSS Type 선택자  (0) 2020.02.14
CSS 사용법  (0) 2020.02.14
티스토리 친구하기