메뉴의 몇 번째 항목을 지정하거나, 단락의 첫 번째 글자만 지정할 때 클래스 이름 앞에 콜론(:) 을 1개만 붙여 표시하는 가상 클래스와 2개(::) 를 붙여 표시하는 가상 요소를 사용하면 해결할 수 있음.
사용자 동작에 반응하는 가상 클래스
① 방문하지 않은 링크에 스타일을 적용하는 :link 가상 클래스 선택자
텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시됨. 이 때 밑줄을 없애거나 색상을 바꿀 때 사용.
.navi a:link, .navi a:visited { /* 방문한 링크와 방문하지 않은 링크 설정 */
display: block;
font-size: 14px;
color: #000;
padding: 10px;
text-decoration: none; /* 밑줄 없앰. */
text-align: center;
}
...
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
...
</ul>
</nav> ② 방문한 링크에 스타일을 적용하는 :visited 가상 클래스 선택자
웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용. 한 번 이상 방문한 텍스트 링크는 보라색이 기본값임.
③ 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 :hover 가상 클래스 선택자
...
.navi a:hover, .navi a:focus { /* 마우스 포인터를 올렸을 때와 초점을 맞췄을 때 설정*/
background-color: #222; /* 배경색을 짙은 회색으로 변경 */
color: #fff;
}
...④ 웹 요소를 활성화했을 때 스타일을 적용하는 :active 가상 클래스 선택자
- 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정함.
...
.navi a:active { /* 마우스 포인터로 클릭했을 때 지정*/
background-color: #f00;
}
...⑤ 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 :focus 가상 클래스 선택자
- 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서
Tab을 눌러 입력 커서를 이동했을 때 스타일을 지정함.
// 가상 클래스 선택자를 사용해 링크 스타일 적용하기
<style>
.navi ul li {
float: left;
width: 150px;
padding: 10px;
list-style: none; /* 리스트 불릿 삭제 */
}
.navi a:link, .navi a:visited {
display: block;
font-size: 14px;
color: #000;
padding: 10px;
text-decoration: none; /* 밑줄 없앰 */
text-align: center;
}
.navi a:hover, .navi a:focus {
background-color: #222;
color: #fff;
}
.navi a:active { /*마우스 포인터로 클릭했을 때*/
background-color: #f00;
}
</style>
요소 상태에 따른 가상 클래스
① 앵커 대상에 스타일을 적용하는 :target 가상 클래스 선택자
문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크 를 이용하고, 같은 문서안에서 다른 위치로 이동할 때에는 앵커(anchor) 를 이용함. 이때 :target 선택자 를 사용하면 앵커로 연결된 부분의 스타일을 쉽게 적용할 수 있음.
...
#intro:target {
background-color: #0069e0;
color: #fff;
}
.....
<nav class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="#reservation">예약 방법 및 요금</a></li>
<li><a href="#ps-2.html">예약하기</a></li>
</ul>
</nav>
<div id="intro" class="contents">
<h2>이용 안내</h2>
...코드 생략... ② 요소의 사용 여부에 따라 스타일을 적용하는:enabled와 :disabled 가상 클래스 선택자
③ 선택한 항목의 스타일을 적용하는:checked 가상 클래스 선택자
④ 특정 요소를 제외하고 스타일을 적용하는:not 가상 클래스 선택자
구조 가상 클래스
구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자임.
① 특정 위치의 자식 요소 선택하기
② 수식을 사용해 위치 지정하기
가상 요소
가상 클래스 가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소 는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가함. 가상 요소 는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개(::)를 붙여 표시함.
① 첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 ::first-line 요소, ::first-letter 요소
첫 번째 글자는 반드시 첫 번째 줄에 있어야함. 만약 <p> 태그 안에 <br> 태그 가 있어서 첫 번째 줄에 없을 경우에는 적용할 수 없음.
② 내용 앞뒤에 컨텐츠를 추가하는 ::before 요소, ::after 요소
::before 요소 와 ::after 요소 를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있음. 이 요소를 사용하면 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있음.
... 코드 생략 ...
li.new::after {
content: "NEW!!";
font-size: x-small;
padding: 2px 4px;
margin: 0 10px;
border-radius: 2px;
background: #f00;
color: #fff;
}
...
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="new"></li>
<li></li>
<li></li>
<li class="new"></li>
</ul>
</div> 
