선택자(selectors) - 유사클래스(pseudo-class) Part1

너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조

CSS 링크 스타일 기초

순서는 LoVe:HAte 를 상기 하자

CSS :tager 동적 유사 클래스

: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

저작자표시