항상 같은 css를 적용하는 것이 아닌, 특정 상태가 되었을 때만 css를 사용하고 싶은 경우도 있다.
이러한 상황에 의사 클래스라는 것을 사용한다.
의사 클래스(가상클래스)는 선택자에 추가하는 키워드로, 어떤 특정한 상태가 되었을 때 css를 적용하겠다는 의미이다.
의사클래스는 다양한 형태가 있는데 그중 대표적인 것을 알아보려고 한다.
- hover: 마우스 포인터를 요소에 올려두었을 때
- active: 요소가 활성화 되었을 때 (마우스 클릭 등)
- focus: 요소가 포커스를 받고 있을 때
- disabled: 비활성 상태일 때
- nth-child(): 형제 사이에서의 순서에 따라 요소를 선택
코드 예시
<head>
<style>
a:hover{
color: white;
background-color: gray;
}
a:active{
color: white;
background-color: black;
}
li:nth-child(3){
color: white;
background-color: gray;
}
li:nth-child(n){
color: white;
background-color: gray;
}
li:nth-child(2n-1){
color: white;
background-color: gray;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">사진</li>
<li><a href="#">사진</li>
<li><a href="#">사진</li>
<li><a href="#">사진</li>
</ul>
</body>위에서부터 순서대로
hover와 active는 설명한 바와 같고 nth-child에 대해 알아보자면,
뒤의 괄호에 3이라고 쓰여있을 경우 li태그들 중 3번째를 선택했다는 것을 의미한다.
n의 경우에는 모든 li태그의 선택을 의미하며
2n-1의 경우 2의 배수에서 -1의 순서에 해당하는 태그를 의미한다. 즉 홀수만을 선택한 것이며 "-1"가 없을 경우에는 짝수를 의미한다.
다음은 의사 요소이다.
의사 요소는 선택자에 추가하는 키워드로 선택한 요소의 특정 부분만 집어 css를 적용할 수 있다.
- after: 요소의 앞에 의사 요소를 생성 및 추가한다.
- before: 요소의 뒤에 의사 요소를 생성 및 추가한다.
- first-line: 블록 레벨 요소의 첫번째 선에 스타일을 적용한다.
- marker: 목록 기호의 스타일을 적용한다.
- placeholder: input 내부의 안내문구
코드 예시
<head>
<style>
a::first-letter{
color: white;
}
a::after{
content: "보기";
}
a::before{
content: "보기";
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">사진</li>
<li><a href="#">사진</li>
<li><a href="#">사진</li>
<li><a href="#">사진</li>
</ul>
</body>순서대로
- a::first-letter: a태그의 앞 글자에만 css적용
- a::after / content: a태그의 앞 부분에 content의 내용을 붙인다.
- a::before / content: a태그의 뒷 부분에 content의 내용을 붙인다.
hyohyo