가상클래스와 가상요소
1.동작에 반응하는 클래스
- a:link{}:하이퍼링크 걸렸을 때
- a:visited{}:클릭 한 후
- a:hover{}:마우스 올렸을 때
- a:active{}:마우스 클릭했을 때
*:focus :초점이 맞추어졌을 때 스타일 적용(input ...에 주로 적용)<style> a:link{ text-decoration:non; font-size:9px; }/*이퍼링크 걸렸을 때 텍스트에 데코레이션 없애고 사이즈 9px*/ a:visited{ text-decoration:non; font-size:9px; }/*클릭 한 후 텍스트에 데코레이션 없애고 사이즈 9px*/ a:hover{ text-decoration: underline; }/*우스를 올렸을 때 텍스트 밑줄*/ a:active{ text-decoration: underline; }/*마우스 클릭했을 때 텍스트 밑줄*/ </style> <body> <a href="#">HOME</a> </body>
2.input에서 사용
- :enabled: 입력 가능하게
- :disabled: 입력하지 못하게
- :checked: radio,checkbox에서 선택했을 때 스타일 적용
<style> input:disabled{ background: black; }/*input태그의 disabled 속성이 있는 곳에 스타일 적용 -> disabled속성으로 인해 입력하지 못하게 설정*/ input:checked+span{ color:red; font-size:20px; }/*radio,checkbox에서 항목을 선택했을 때 스타일*/ </style> <body> <input type="text" disabled> <input type="radio"><span>html</span> </body>
3.child선택자
- nth-child(n): 앞에서부터 n번째 자식요소에 스타일 적용
- nth-last-child(n): 뒤에서부터 n번째 자식요소에 스타일 적용
- first-child: 첫번째 자식에 적용
- last-child: 마지막 자식에 적용
<style> li:first-child{ background:yellow }/*li의 첫번째 자식에 배경색 yellow적용*/ li:last-child{ background:green }/*li의 마지막 자식에 배경색 green적용*/ li:nth-child(2){ background:skyblue }/*li자식의 앞에서 2번째 자식에 배경색 skyblue적용*/ li:nth-last-child(2){ background:red }/*li자식의 마지막에서 2번째 자식에 배경색 red적용*/ </style> <body> <ul> <li><a href="#">HOME</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JAVASCRIPT</a></li> </ul> </body>
배운 거 머리에 집어넣기 위한 블로그