Pseudo-class(가상 클래스)
- 여러 상태에 따른 스타일을 지정해 줄 수 있다
문법
selector:pseudo-class {
property: value;
}
주로 btn, a, input 태그와 결합하여 사용한다
.btn {background: blue;} /* 기본 상태 */
.btn:hover {background: pink;} /* 마우스 호버시 */
.btn:focus {background: plum;} /* 클릭 후 계속 포커스 상태일 때 */
.btn:active {background: yellow;} /* 클릭 중일 때 */단 hover, focus, active를 동시에 스타일링 할 경우 해당 순서대로 작성하여야 정상작동 한다
입력 요소의 가상 클래스 (input)
| :autofill | input의 값을 자동으로 채울때 스타일링 |
| :disabled | 사용 불가 상태인 input선택 |
| :enabled | 사용 가능 상태인 input선택 disabled로 지정한 input아닌 경우 모두 포함됨 |
| :focus | 포커스가 위치한 input 선택 마우스 클릭 또는 탭 키로 활성화 된 input 1개 선택 |
| :in-range | 특정 범위 안의 값을 가진(min, max) input 선택 |
| :invalid | 비 정상 값을 가진 input 선택 |
| :vaild | 정상 값이 입력된 모든 input 선택 |
| :optional | required(필수 입력 항목)가 지정되지 않은 input 선택 |
| :out of range | 특정 범위를 벗어난 값을 가진 input 선택 |
| :read-only | readonly가 적용된 input 선택 |
| :read-write | readonly가 적용되지 않은 input 선택 |
| :required | required 속성이 지정된 모든 input 선택 |
| :blank | 빈 문자열을 입력한 input 선택 |
| :checked | 체크박스, 라디오 input에서 선택된 input 선택 (다른 요소에 사용 불가능) |
링크 가상 클래스
| :active | 활성화 된 링크 |
| :visited | 방문 한 링크 |
| :hover | 마우스 커서가 요소 위에 위치할 때 |
| :link | 방문하지 않은 링크 |
요소 선택 가상 클래스
| :empty | 자식 요소가 없는 요소 선택 |
| :first-child | 부모 요소의 첫 번째 자식 요소 선택 |
| :last-child | 부모 요소의 마지막 자식 요소 선택 |
| :nth-child(n) | 부모 요소의 자식 요소들 중 n번째로 오는 자식 요소 선택 |
| :nth-last-child(n) | 부모 요소의 자식 요소들 중 n번째로 오는 자식 요소를 끝에서부터 선택 |
| :first-of-type | 부모 요소의 자식 요소들 중 특정 타입의 첫 번째 자식 요소 선택 |
| :last-of-type | 부모 요소의 자식 요소들 중 특정 타입의 마지막 자식 요소 선택 |
| :nth-last-of-type(n) | 부모 요소의 자식 요소들 중 특정 타입의 n번째 마지막 자식 요소 선택 |
| :nth-of-type(n) | 부모 요소의 자식 요소들 중 특정 타입의 n번째 요소 선택 |
| :not(x) | 선택한 요소들 중 조건에 해당하는 것을 제외한 나머지 요소 선택 x에는 태그, 클래스, 가상 클래스, 속성이 올 수 있다 |
nth~에 들어가는 서수 n
- n에 간단한 연산식을 적용해 선택하는 요소를 필터링한다
- 변수는 0부터 시작하는 정수 값이 대입된다
li:nth-child(n){} /* n번째 요소 */
li:nth-child(odd), li:nth-child(2n-1){} /* 홀수 선택 */
li:nth-child(even), li:nth-child(2n){} /* 짝수 선택 */
li:nth-child(2n+4){} /* 4, 6, 8...번째 요소 */
li:nth-child(-n+x){} /* 앞에서부터 x번째 요소까지 선택 */
li:nth-child(n+x){} /* x번째부터 마지막까지 선택 */
li:nth-child(n+x):nth-child(-n+y){} /* x번째부터 y번째까지 선택 */
li:not(:nth-child(x)){} /* x를 제외한 모두 선택 */
li:nth-last-child(n+x), li:nth-last-child(n+x) ~ li{} /* 요소가 x개 이상일 때 전체 선택*/
li:nth-last-child(-n+x), li:nth-last-child(-n+x) ~ li{} /* 요소가 x개 이하일 때 전체 선택*/
css 선택자 연습하기 좋은 사이트
https://css-speedrun.netlify.app/
참고한 글--
코딩애플
https://blogpack.tistory.com/768
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
