NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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'으로 시작하는 요소를 선택(val, value 모두 선택)
E[attr$=val] yes yes yes yes yes yes no 'attr' 속성의 값이 'val'으로 끝나는 요소를 선택(val, eval 모두 선택)
E[attr*=val] yes yes yes yes yes yes no 'attr' 속성의 값에 'val'이 포함되는 요소를 선택(val, value, eval 모두 선택)
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'으로 끝나는 요소를 선택(val 선택, eval 선택 안함)
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 no no 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 | 정찬명 | 댓글: 37개 |
트랙백URI - http://naradesign.net/wp/2010/06/17/1343/trackback/

37개의 댓글이 있습니다.

  1. 정찬명의 생각…

    42 CSS3 Selectors(+Meaning) & Browser Support. http://naradesign.net/wp/2010/06/17/1343/

  2. 나상욱 댓글:

    위에 테이블도 jQuery를 쓰신거겠죠?
    td:contains(“no”)
    맞나요? ㅎㅎ

  3. 정찬명 댓글:

    @나상욱
    예리하시네요. ^^
    $(‘.no’).css(‘background’,’red’).css(‘color’,’white’);
    이렇게 사용 했습니다.

  4. 청설모 댓글:

    .css(‘background’,’red’).css(‘color’,’white’) // 이 부분은
    .css({‘background’:’red’,’color’:’white’}) // 이렇게 적을 수도 있는데
    혹시 묶지 않는 이유가 있으세요? :D

  5. 정찬명 댓글:

    @청설모
    그러게 말이죠. 좋은 지적 감사해요. 이렇게 배워요. ^^

  6. cain 댓글:

    딴지는 아니고요^^;;
    HTML/CSS 만으로도 충분히 가능한 일을 JS에게 완전히 의존하는 코드를 보면 저는 이렇게 이야기 한답니다. “건방지게 어딜 나서? 겸손할 줄 알아야지. 넌 항상 HTML/CSS 다음이야.” 라구요.
    컨텐츠가 no인 td의 백그라운드 컬러의 지정을 css가 아니고 jQuery로 쓰신 것은 이 경우에 해당하지는 않는 건가요? 아니면 백그라운드 컬러의 지정 정도는 css가 아니고 jQuery로 해도 된다고 보시는 건가요?

  7. 정찬명 댓글:

    @cain
    네, 그렇게 보는 시각이 맞을 수도 있습니다. 하지만 제가 사용한 경우는 CSS/JS가 없는 상황에서도 내용 전달에 문제가 없는 케이스라서 건방지게 나섰다기 보다는 ‘굳이’ 나섰다는 표현이 맞을 것 같습니다. 사실은 인라인 CSS 작성하기 귀찮아서 그랬어요. ㅎㅎㅎ.

  8. 김무건 댓글:

    하위 버전의 브라우저에서 지원하지 않는 css 선택자는 jQuery가 유용하더군요.
    아예 표로 싹 정리해 놓으니 보기 좋습니다.
    잘 보고 갑니당 :)

  9. Outsider 댓글:

    좋은 정보 감사합니다. ㅎ

  10. 제로찬 댓글:

    tr:nth-child(even) -> IE계열(폴라리스)란 넘 때문에 ㅎㅎ 그냥 포기했는데

  11. 이군 댓글:

    얼마전 찬명님께서 FAQ를의 인터렉션을 구현하셔서 블로그에 공개 했을 때, 저도 자극이되어서 요즘 jQuery 를 집중 스터디하고 있습니다~ http://naradesign.net/wp/2010/03/26/1265/ < 자극제가 된 포스팅! 좋은 글 감사합니다! 저도 많이 공부할께요. 청설모님께서 알려주신 jQuery로 CSS코드 작성법 와우 공부가 되는군요. 덜덜~

  12. 정찬명 댓글:

    @제로찬
    그럼 이제 jQuery를 사용할 동기가 유발된 것인가요? ㅎㅎ

  13. 정찬명 댓글:

    @김무건 @Outsider
    감사합니다. 참고하시다가 오류 같은게 있으면 제보 좀 해주세요. ㅎㅎ

  14. 정찬명 댓글:

    @이군
    가르치는 척 하면서 배우고 있다는 사실을 청설모님이 다시금 확인시켜 주셨지요. 이 방법 이군님께도 강추 합니다. ㅎㅎ

  15. 익명 댓글:

    아직도 IE에만 의존해서 사이트를 유지관리해야하는 현실(핑계? 변명?)을 한탄하고 있는 찌질 개발자로서… 정말 열심히 공부하고 노력해야겠습니다. 좋은 글로 도움(자극)주셔서 항상고맙습니다. ^^

    사용자들의 인식과 개발자들의 인식이 함께.. 바뀌어 나가길 기대해 봅니다.

    여하튼 대한민국 16강 화이팅!!!입니다. ^^;;;

  16. 정찬명 댓글:

    @익명
    익명님 같은 분들이 많이 나타나 주시기만 한다면야 금방 바뀔 수도 있을것 같은데요. ^^
    이제는 8강을 향해 화이팅 입니다!

  17. 999 댓글:

    “교수들은 사실 학생들을 가르치는 척 하면서 배운다.”
    그래도 교수님의 막강한 내공은 무시할 수 없지요.
    항상 눈팅만 하다가 댓글 남깁니다~ 감사합니다.

  18. 정찬명 댓글:

    @999
    교수님들의 내공을 무시하는 것은 절대 아니구요. 그런 내공을 지녔음에도 불구하고 배운다는 겸손한 자세를 갖는 것이 존경 스럽고 그걸 배우자는 의미 였습니다. 감사합니다. ^^

  19. 정찬명 댓글:

    @펄님
    무슨 말인지 알겠어. 시간이 날 때 보완 해야겠네. 고마워. ^^

  20. 후~ 댓글:

    정찬명님 웹표준세미나 이후 2번째 만남이라 방가웠습니다. 정말 수고하셨어요^^
    여기다 질문을 해도 될까요? ^^;

    트위터에 CSS선택자관련 JS라이브러리 링크가 있는데요~! 적용이 안되는듯해서여..
    샘플사이트도 없고.. 혹 되는지 확인해보셨나요?? ^^;
    http://www.keithclark.co.uk/labs/ie-css3/

  21. 후~ 댓글:

    하루종일 삽질하다가 찾았습니다..
    바쁘실텐데 안해보셔도 될듯합니다. 유용한 소스 감사드려요~~ㅅ^^

  22. 정찬명 댓글:

    @후~
    제가 아직 사용해 보지 않아서 잔뜩 쫄고 있었는데 다행이네요. ㅎㅎ

  23. 액션 댓글:

    $(‘td:nth-child()’) 선택 후 배경색을 입히는건 가능하나
    기제해주신 $(‘tr:nth-child()’) 는 IE7,6에선 작동하지 않습니다. ㅜ.ㅜ

    저만 그런건가요??
    tr에 색상을 입히는게 너무 필요한데 안되네요 도와주세요~~!!

  24. 액션 댓글:

    위의글 해결했습니다.

    초기화하는 코드에 잘못된 부분이 있었습니다.

    좋은 tip감사합니다.

  25. 정찬명 댓글:

    @액션

    짝수행만 찾아서 CSS로 배경 처리하실꺼라면 다음과 같이 하실 수 있겠지요.
    tr:nth-child(2n) { background:#eee; }
    하지만 IE 6~8 브라우저가 지원하지 않는 선택자 사용법이구요.

    짝수행만 찾아서 jQuery로 배경 처리하실꺼라면 다음과 같이 하실 수 있겠지요.
    $(‘tr:nth-child(2n)’).css(‘background’,’#eee’);
    이 코드는 모든 브라우저에서 실행 가능한 코드 입니다.

    혹시 다른 분들이 궁금해 하실까봐 일부러 적었습니다. ^^

  26. 문영신 댓글:

    E:focus 는 IE6,7 에서 동작하지 않는걸로 아는데요?

  27. 정찬명 댓글:

    @문영신
    문영신님 말씀이 맞습니다. 오류를 정확하게 발견해 주셨네요. 고맙습니다. ^^

  28. 내사랑꿀떡 댓글:

    덕분에 jquery 플러그인 달력문제 css 문제 해결했습니다. ^^
    위 내용 퍼가도 괜찮을지.. ^^

  29. 정찬명 댓글:

    @내사랑꿀떡
    네 괜찮습니다. 블로그 하단에 표시한 크리에이티브 커먼즈 3.0 조건에 따라 이용하실 수 있습니다. ^^

  30. 그린애플 댓글:

    jQuery 강의 포스팅은 이게 마지막이예요? 더 안하세요? (독촉독촉)
    선택-진행-조정 중에 선택 강의하셨으니 이제 진행과 조정도 강의해주세요.
    ㅎㅎㅎ

    회사를 옮긴 후에 시간이 여유로와서 jQuery를 공부하려고 하던 참이었는데,
    나라디자인 역주행하다 발견하네요.
    배울 생각이 아예 없었으면 읽지 않았을 포스팅인데 -_ -;; ㅎㅎㅎ

    남은 강의도 해주시고!
    책도 좀 추천해주세요. =ㅂ= 히히

  31. 정찬명 댓글:

    @그린애플
    회사를 어디로 옮겼어요? jQuery는 저도 초보라서 아직 강의할 수준이 못돼요. ㅎㅎ 대신 괜찮은 책 추천할께요. http://www.yes24.com/24/Goods/4221180?Acode=101

  32. […] IE6에서 E:first-letter와 E:first-line의 지원여부를 No라고 되어있는 사이트중 나라디자인도 포함되어 […]

  33. Wise 댓글:

    찬명님 ~ IE6에서 E:first-letter와 E:first-line의 지원여부를 No라고 되어있는데요 제가 IE 6(6.0.2900.5512.xpsp_sp3_gdr.111025-1629)에서 테스트한 결과 Yes라고 나오는데 한번 더 확인부탁드려요 ^^

  34. 정찬명 댓글:

    @Wise
    제 테스트 결과는 쿽스모드일 때 지원하지만 표준모드에서는 지원하지 않았어요. 그래서 지원하지 않는다고 표시를 했습니다.

    테스트 했던 페이지의 DTD를 한번 확인해 보시겠어요? 아이러니하게도 DTD가 표준이 아니면 E:first-letter와 E:first-line을 지원하게 됩니다.

  35. Wise 댓글:

    저도 혹시나 해서 한번더 제가 테스트 했는데, DTD 가 표준(xhtml1.0 Transitional ), 쿽스(DTD 전혀 없을경우) 모두 상관 없었습니다.
    대신 스펙에 있듯이 The ‘first-line’ pseudo-element can only be attached to a block-level element. 블록엘리먼트 일때만 적용되는 것까지 확인했습니다.
    IE6의 버전에 따라 문제가 발생하는지 DTD에 따라 문제가 발생하는지는 한번 더 테스트를 해봐야 할것 같네요 ^^; (혹시 테스트 했던 파일 제가 볼수 있을까요?^^?)

  36. 양태호 댓글:

    잘 봤습니다~ 너무 모자라기에 콩나물 시루에 물 붓는 마음으로 그저 열심히 보고 있스빈다..ㅎ;;

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님