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/

23개의 댓글이 있습니다.

  1. naradesign's me2DAY 님의 말:
    2010년 6월 17일, (3:45)

    정찬명의 생각…

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

  2. 나상욱 님의 말:
    2010년 6월 17일, (10:08)

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

  3. 정찬명 님의 말:
    2010년 6월 17일, (10:18)

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

  4. 청설모 님의 말:
    2010년 6월 17일, (10:42)

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

  5. 정찬명 님의 말:
    2010년 6월 17일, (11:01)

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

  6. cain 님의 말:
    2010년 6월 17일, (16:15)

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

  7. 정찬명 님의 말:
    2010년 6월 17일, (16:34)

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

  8. 김무건 님의 말:
    2010년 6월 17일, (16:57)

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

  9. Outsider 님의 말:
    2010년 6월 17일, (17:57)

    좋은 정보 감사합니다. ㅎ

  10. 제로찬 님의 말:
    2010년 6월 18일, (16:07)

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

  11. 이군 님의 말:
    2010년 6월 18일, (20:48)

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

  12. 정찬명 님의 말:
    2010년 6월 21일, (11:57)

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

  13. 정찬명 님의 말:
    2010년 6월 21일, (11:58)

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

  14. 정찬명 님의 말:
    2010년 6월 21일, (12:01)

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

  15. 익명 님의 말:
    2010년 6월 23일, (10:03)

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

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

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

  16. 정찬명 님의 말:
    2010년 6월 23일, (13:19)

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

  17. 999 님의 말:
    2010년 6월 26일, (0:17)

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

  18. 정찬명 님의 말:
    2010년 6월 29일, (14:24)

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

  19. 펄님 님의 말:
    2010년 7월 1일, (13:26)

    IE6이 지원한다고 써 있는 E:hover의 경우 로 국한되어 있기 때문에 오해의 소지가 있을 수도 있겠어요-
    사실     이외의 다른 엘리먼트에 E:hover와 같은 가상 셀렉터의 사용이 가능하다는 것은 표현의 범위가 엄청나게 확장되는 것을 의미하거든요-
    이 글에서 말하고자 하는 주제와는 다소 어긋날수도 있겠으나…부분적으으로 Yes라고 한다면 더 완벽한 정보가 되지 않을까해서 코멘트 남겨요~^^

  20. 정찬명 님의 말:
    2010년 7월 1일, (22:46)

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

  21. 후~ 님의 말:
    2010년 7월 6일, (18:04)

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

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

  22. 후~ 님의 말:
    2010년 7월 6일, (19:09)

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

  23. 정찬명 님의 말:
    2010년 7월 6일, (19:12)

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

댓글 남기기

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

필수 아님

필수 아님