pseudo class selector

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

codingfarm

pseudo class selector 본문

web/CSS3

pseudo class selector

scarecrow1992 2020. 10. 2. 16:09

각 element의 상태에 따라 여러가지 특수한 선택들을 가능케 하는 선택자이다.

클래스 선택자처럼 행동하지만 클래스 선택자는 아니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            a:link{
                /*방문 안한곳일 경우 글자색 변화*/
                color : black;
            }
            a:visited{
                /*이미 방문한 링크일 경우 글자색 변화*/
                color:red;
            }
            a:hover{
                /*마우스를 올릴경우 글자색 변화*/
                color:yellow;
            }
            a:active{
                /*좌클릭 중일 경우 글자색 변화
                좌클릭할경우 hover와 active가 동시에 활성화 되며
                나중에 있는것이 최종적으로 덧씌워지기 때문에 
                active를 hover보다 뒤로 빼도록 한다.*/
                color:green;
            }
            a:focus{
                /*tab키로 선택된 태그를 흰색으로 만든다.*/
                color:white;
            }
            input:focus{
                /*현재 입력중인 입력칸의 색을 바꾼다.*/
                background-color: black;
                color : white;
            }
        </style>
    </head>
    <body>
        <a href="https://www.youtube.com">방문함</a>
        <a href="https://a.a">방문안함</a>
        <input type="text">
    </body>
<html>
Colored by Color Scripter
cs