* Not 의사 클래스 *
- Not 의사 클래스(Pseudo Class)는 다른 의사 클래스를 부정하기 위해 사용한다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":not(:"다른 의사 클래스") {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- 가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다.
*:not(:last-child) { . . . }
* Hover 의사 클래스 *
- Hover 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소에 마우스가 올라가 있는 상태(Mouse Hover)일 때에 대한 선택자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":hover {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* Focus 의사 클래스 *
- Focus 의사 클래스(Pseudo Class)는 선택된 요소에 포커스(Focus)가 있을 때에 대한 의사 클래스이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":focus {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
first-of-type, nth-of-type, last-of-type
* first-of-type 의사 클래스 *
- first-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 동일한 종류의 첫번째 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":first-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* nth-of-type 의사 클래스 *
- nth-of-type(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 동일한 종류의 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y (이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
- 이때 순번은 1부터 시작한다. (0 아님)
- 가령 nth-of-type(2n+1)이라는 값은 3, 5, 7, 9... 번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
- 단, n이 음수일 경우, 가령, nth-of-type(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":nth-of-type(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* last-of-type 의사 클래스 *
- last-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 동일한 종류의 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":last-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* first-child 의사 클래스 *
- first-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 첫번째 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":first-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* nth-child 의사 클래스 *
- nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y (이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
- 이때 순번은 1부터 시작한다. (0 아님)
- 가령 nth-child(2n+1)이라는 값은 3, 5, 7, 9... 번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
- 단, n이 음수일 경우, 가령, nth-child(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":nth-child(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* last-child 의사 클래스 *
- last-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":last-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* Disabled 의사 클래스 *
- Disabled 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 비활성화 되어 있는 상태에 대한 선택자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":disabled {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* Checked 의사 클래스 *
- Checked 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 체크 되어 있는 상태에 대한 선택자이다.
- 주로 type이 checkbox인 input을 위해 사용한다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":checked {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
* Active 의사 클래스 *
- Active 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 마우스를 누르고 있는 상태(Mouse Down)일 때에 대한 선택자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":active {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
