목록2012/12/06 (3)
interactive
구조선택자는 CSS3에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. 1. 일반 구조 선택자 선택자 형태설명 :first-child첫번째에 위치하는 자손을 선택 :last-child마지막에 위치하는 자손을 선택 :nth-child(수열)앞에서 수열 번째에 있는 자손을 선택 ex) nth-child(2n) , nth-child(2n+1) :nth-last-child(수열)뒤에서 수열 번째에 있는 자손을 선택 firstsecondthirdfourthfifthsixthseventh 2. 형태 구조 선택자 선택자 형태설명 :first-of-type자손 중에 첫번째로 등장하는 특정태그 :last-of-type자손 중에 마지막으로 등장하는 특정태그 :nth-of-type(수열)자손 중에 앞에서 수열 번째로..
1. 동위선택자 선택자 형태 설명 선택자A + 선택자B 선택자A 바로 뒤에 위치하는 선택자B 선택 선택자A ~ 선택자B 선택자A뒤에 위치하는 선택자B 선택 header-1header-2header-3header-4 2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자 선택자 형태설명 :checked 체크상태의 input 태그 선택 :focus초점이 맞추어진 input 태그 선택 :enabled사용가능한 input 태그 선택 :disabled 사용 불가능한 input 태그 선택
1. 선택자[속성] , 선택자[속성=값] - 특정한 속성이 있는 태그 선택 img[alt] img 중에 alt 속성을 가진 것만 찾는다. input[type=password]input 중에 type이 password 인 것만 찾는다.div#header 아이디가 header 인 div 선택하는 같은 방법이다. div[id=header] div[id="header"] 2. 선택자[속성~=값] , 선택자[속성|=값] - 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함) img[alt~="test"] test 뒤에 띄어쓰기가 있는경우도 찾는다. test 앞에 띄어쓰기가 있는경우도 찾는다. img[alt|="test"] test 뒤에 - 있는 경우 찾는다. 3. 선택자[속성^=값] , ..