선택자(selectors) - 유사클래스(pseudo-class) Part1
너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조
순서는 LoVe:HAte 를 상기 하자
:traget 역시 위포스팅 참조 또는 좋은에제로 http://webdesignernotebook.com/examples/target.html
:focus 유사클래스
엘리먼트가 화면 포커스를 깆고 있는경우이다. 예제를 보자
<form>
<input type="text" class="focus" value="이름">
<input type="button" class="active" value="Search">
</form>
위는 이름을 검색하는 간단한 폼 양식이다. 아래는 적용해본 CSS :hover,같은 것처럼 사용방법에 별다른 어려움 없다.
CSS 사용시 순서는 LoVe:HAte에 focus추가시 link visited hover focus activated로 해야한다
input {
border: 3px solid #999;
background-color: #ccc;
color: #999;
padding: 0 5px;
font-size: 2em; }
input:hover {
border-color: #c99;
color: #666; }
input:focus {
border-color: #f00;
background-color: #fff;
color: #000);
outline: none; }
input:active {
color: #f00;
border-color: #f00;
background-color: #000;}
자식관련 유사클래스
CSS3에서는 id라던가 class지정없이 지정하기쉬워졌다 특히나 리스트 같은 엘리먼트에서는 더욱편하다.첫번째 자식을 선택한다거나 N번째 자식 같은 선택이 가능하다. 아래가 그대표적인것들
- :first-child 첫번째 자식을 말한다
- :last-child 마지막자식
- :nth-child(number) 위에서 괄호안에 숫자순서에 등장하는 자식
- :first-of-type 첫번쩨 엘리먼트
- :last-of-type 마지막엘리먼트
- :nth-of-type(number)
- :nth-last-of-type(number)
아래 예제를 보자.
<ol>
<li>첫번째 자식, 첫번째 타입</li>
<li>두번째 자식</li>
<li>세번째 타입</li>
<li>밑에서 두번째 타입</li>
<li>마지막자식, 마지막 타입 </li>
</ol>
리스트에서 턱스트는 엘리먼트 위치를 말해주고 있다.이에대해 CSS를 정의 해보자
li:first-child { font-size: 1.1em; }
/*첫번쩨 자식의 폰트크기 */
li:first-of-type { color: red; }
/*첫번쩨 엘리먼트*/
li:nth-child(2){ color :#0F0;}
/*두번째 자식의 폰트컬라*/
li:nth-of-type(3) { font-size: 1.5em }
/*세번째 엘리먼트의 폰트크기*/
li:nth-last-of-type(2) { font-size: 2em; }
/*뒤에서 두번째 엘리먼트의 폰트크기*/
li:last-of-type { color: red; }
/* 마지막 엘리먼트의 폰트색깔*/
li:last-child { font-size: 2.5em; }
/*마지막 자식의 폰트크기조절*/
위와 같이 별도 클래스나 아이디 지정없이 지정해줄수 있으니 편해졌다.적용된예제는 아래
http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_01.html
댓글