42 CSS3 Selectors(+Meaning) & Browser Support.

본문 건너 뛰기

CSS level 1~3까지의 모든 선택자와 그에 대한 해설 그리고 대중적인 브라우저들의 지원 여부를 정리하였습니다. CSS 선택자 문법을 익히면 jQuery를 익히는 것에도 무척 도움이 됩니다. jQuery가 HTML 요소를 선택하는 문법이 CSS가 HTML을 선택하는 문법과 거의 동일하니까요. jQuery를 사용하려면 스크립트가 DOM 구조의 HTML을 어떻게 선택하는지 알아야 하고 그것을 알고자 한다면 CSS 선택자 사용법을 익히는 것이 필수적이라고 할 수 있습니다.

제가 요즈음 싸부로 모시는 행복한고니의 jQuery 강의를 들을 기회가 있었는데 이런걸 알려 주더라구요. jQuery를 잘 쓰려면 먼저 세 가지 순서를 기억해야 하는데 그것은 바로 ‘선택하고-실행하고-조정하라’는 것이었습니다. 오늘 제 포스팅은 ‘선택’과 관련된 이야기 입니다. jQuery 코드는 아직 한 줄도 없지만 사실 저는 jQuery 강좌를 시작한 것과 다를 바 없습니다.

저 jQuery 잘하냐구요? 아니요. 저는 제가 이미 알고 있는 것들을 글로 옮기는 일에는 사실 흥미가 없습니다. 주로 모르는 것을 잘 알기 위해 글을 쓰는 편이죠. 얼마전 라디오를 듣는데 어떤 교수님께서 이런 고백을 하십니다. "교수들은 사실 학생들을 가르치는 척 하면서 배운다" 라구요. 이것은 교수님들만의 이야기는 아닌것 같아요.

참, 그리고 한 가지 더 추가 하자면 CSS는 낡은 브라우저(IE6)에서 선택자 사용을 지원하지 못하는 호환성 문제가 있지만 자바스크립트는 그렇지 않습니다. jQuery는 아래 표시된 모든 브라우저에서 똑같이 선택자 사용을 지원합니다. 이것 또한 jQuery의 장점 이라고 할 수 있겠네요. CSS를 이용해서 뭔가 선택하지 못하는 경우 jQuery를 이용하면 선택할 수 있으니까요.

가령 게시판을 제작할 때 짝수 행 <tr> 만을 선택하여 배경색을 지정하려는 경우 tr:nth-child(even) 이라는 CSS 선택자를 사용할 수 있지만 IE 6~8 브라우저는 아직 CSS 3 선택자를 지원하지 않기 때문에 표현이 불가능 합니다. 그러나 jQuery는 이렇게 ‘선택+실행’ 할 수 있습니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
  $('tr:nth-child(even)').css('background','red');
});
</script>

odd는 홀수를 의미하고 even은 짝수를 의미하죠. 아직 자바스크립트 또는 jQuery를 배울만한 동기가 없으셨던 분들께는 새로운 동기부여가 되었으면 좋겠습니다. 아주 쉽다는 것을 깨닫고 한 번 사용하기 시작하면 걷잡을 수 없이 빠져드는 매력이 있답니다. 그러나 과유불급. 어느곳에 쓰고 어느곳에는 쓰지 말아야 할지 정확히 알고 쓰는것이 더 중요합니다. HTML/CSS 만으로도 충분히 가능한 일을 JS에게 완전히 의존하는 코드를 보면 저는 이렇게 이야기 한답니다. "건방지게 어딜 나서? 겸손할 줄 알아야지. 넌 항상 HTML/CSS 다음이야." 라구요.

42 CSS 3 Selectors C:Chrome, S:Safari, F:Firefox, O:Opera, IE:Internet Explorer
level Selectors C5 S4 F3.6 O10.5 IE8 IE7 IE6 Meaning
CSS 3 E[attr^=val] yes yes yes yes yes yes no ‘attr’ 속성의 값이 ‘val’으로 시작하는 요소를 선택(공백으로 분리된 값이 일치해야 한다)
E[attr$=val] yes yes yes yes yes yes no ‘attr’ 속성의 값이 ‘val’으로 끝나는 요소를 선택(공백으로 분리된 값이 일치해야 한다)
E[attr*=val] yes yes yes yes yes yes no ‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택(공백으로 분리된 값과 정확하게 일치하지 않아도 선택)
E:root yes yes yes yes no no no 문서의 최상위 요소(html)를 선택
E:nth-child(n) yes yes yes yes no no no 앞으로부터 지정된 순서와 일치하는 요소가 E 라면 선택(E 아닌 요소의 순서가 계산에 포함됨)
E:nth-last-child(n) yes yes yes yes no no no 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택(E 아닌 요소의 순서가 계산에 포함됨)
E:nth-of-type(n) yes yes yes yes no no no E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택(E 요소의 순서만 계산에 포함됨)
E:nth-last-of-type(n) yes yes yes yes no no no E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택(E 요소의 순서만 계산에 포함됨)
E:last-child yes yes yes yes no no no 마지막에 등장하는 요소가 E 라면 선택(E 아닌 요소의 순서가 계산에 포함됨)
E:first-of-type yes yes yes yes no no no E 요소 중 첫 번째 E를 선택(E 요소의 순서만 계산에 포함됨)
E:last-of-type yes yes yes yes no no no E 요소 중 마지막 E를 선택(E 요소의 순서만 계산에 포함됨)
E:only-child yes yes yes yes no no no E 요소가 유일한 자식이면 선택(E 아닌 요소가 하나라도 포함되면 선택 안함)
E:only-of-type yes yes yes yes no no no E 요소가 유일한 타입이면 선택(E 아닌 요소가 포함되어도 E 타입이 유일하면 선택)
E:empty yes yes yes yes no no no 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택
E:target yes yes yes yes no no no E의 URI가 요청되면 선택(따라서 E는 ID가 지정되어 있어야 한다)
E:enabled yes yes yes yes no no no 사용 가능한 폼 콘트롤(input, textarea, select, button) E를 선택
E:disabled yes yes yes yes no no no 사용 불가능한 폼 콘트롤(input, textarea, select, button) E를 선택
E:checked yes yes yes yes no no no 선택된 폼 콘트롤(input checked="checked")을 선택
E:not(s) yes yes yes yes no no no S가 아닌 E 요소를 선택
E~F yes yes yes yes yes yes no E 요소가 앞에 존재하면 F를 선택(E가 F보다 먼저 등장하지 않으면 선택 안함)
CSS 2 * yes yes yes yes yes yes yes 모든 요소를 선택
E[attr] yes yes yes yes yes yes no ‘attr’ 속성이 포함된 요소 E를 선택
E[attr=val] yes yes yes yes yes yes no ‘attr’ 속성의 값이 정확하게 ‘val’과 일치하는 요소 E를 선택
E[attr~=val] yes yes yes yes yes yes no ‘attr’ 속성의 값에 ‘val’이 포함되는 요소를 선택(공백으로 분리된 값이 일치해야 한다)
E[attr|=val] yes yes yes yes yes yes no ‘attr’ 속성의 값이 ‘val’ 또는 ‘val-’ 으로 시작되는 요소 E를 선택
E:first-child yes yes yes yes yes yes no 첫 번째 등장하는 요소가 E 라면 선택(E 아닌 요소의 순서가 계산에 포함됨)
E:lang(en) yes yes yes yes yes no no HTML lang 속성의 값이 ‘en’으로 지정된 요소를 선택
E:before yes yes yes yes yes no no E 요소의 시작 지점에 생성된 요소를 선택
E:after yes yes yes yes yes no no E 요소의 끝 지점에 생성된 요소를 선택
E>F yes yes yes yes yes yes no E 요소의 자식인 F 요소를 선택
E+F yes yes yes yes yes yes no E 요소를 뒤따르는 F 요소를 선택(E와 F 사이에 다른 요소가 존재하면 선택 안함)
CSS 1 E yes yes yes yes yes yes yes E 요소를 선택
E:link yes yes yes yes yes yes yes 방문하지 않은 앵커 E를 선택
E:visited yes yes yes yes yes yes yes 방문한 앵커 E를 선택
E:hover yes yes yes yes yes yes yes E 요소에 마우스가 올라가 있는 동안 E를 선택
E:active yes yes yes yes yes yes yes E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택
E:focus yes yes yes yes yes yes yes E 요소에 포커스가 머물러 있는 동안 E를 선택
E:first-line yes yes yes yes yes yes no E 요소의 첫 번째 라인을 선택
E:first-letter yes yes yes yes yes yes no E 요소의 첫 번째 문자를 선택
.class yes yes yes yes yes yes yes 클래스 이름이 class로 지정된 요소 선택
#id yes yes yes yes yes yes yes 아이디 이름이 id로 지정된 요소 선택
E F yes yes yes yes yes yes yes E 요소의 자손인 F 요소를 선택

분류: CSS,웹 디자인,웹 표준,자바스크립트 | 2010년 6월 17일, 3:39 | 정찬명 | 댓글: 23개 |
트랙백URI - http://naradesign.net/wp/2010/06/17/1343/trackback/