Nizbridge

UI Developer

Navigation
 » Blog
 » About Me
 » Projects
 » Github
 » Bookmark
 » XML Feed

css 선택자

06 Nov 2015 » all, html-css

CSS 선택자가 잘 정리되어 있는 사이트가 있어서 퍼왔습니다.
지원 브라우저와 간단한 예제도 같이 제공되고 있어서,
선택자 사용시에 자주 참고하고 있습니다.

CSS 1
↓ Selector / Browser →IE6IE7IE8IE9 previewFF 3FF 3.5FF 3.6Safari 3Safari 4Chrome 5 betaOperaOpera 10.5 beta
↑ Selector / Browser →IE6IE7IE8IE9 previewFF 3FF 3.5FF 3.6Safari 3Safari 4Chrome 5 betaOperaOpera 10.5 beta
EYESYESYESYESYESYESYESYESYESYESYESYES
E FYESYESYESYESYESYESYESYESYESYESYESYES
:linkYESYESYESYESYESYESYESYESYESYESYESYES
E:activeYESYESYESYESYESYESYESYESYESYESYESYES
E:visitedYESYESYESYESYESYESYESYESYESYESYESYES
E:first-lineNOYESYESYESYESYESYESYESYESYESYESYES
E:first-letterNOYESYESYESYESYESYESYESYESYESYESYES
E.classnameYESYESYESYESYESYESYESYESYESYESYESYES
E#idYESYESYESYESYESYESYESYESYESYESYESYES
.classname.classnameNOYESYESYESYESYESYESYESYESYESYESYES
CSS 2.1
↓ Selector / Browser →IE6IE7IE8IE9 previewFF 3FF 3.5FF 3.6Safari 3Safari 4Chrome 5 betaOperaOpera 10.5 beta
↑ Selector / Browser →IE6IE7IE8IE9 previewFF 3FF 3.5FF 3.6Safari 3Safari 4Chrome 5 betaOperaOpera 10.5 beta
*YESYESYESYESYESYESYESYESYESYESYESYES
E > FNOYESYESYESYESYESYESYESYESYESYESYES
E:first-childNOYESYESYESYESYESYESYESYESYESYESYES
E:hoverPARTIAL(1)YESYESYESYESYESYESYESYESYESYESYES
E:focusNONOYESYESYESYESYESYESYESYESYESYES
E + FNOYESYESYESYESYESYESYESYESBUGGY (5)YESYES
E[attr]NOYESYESYESYESYESYESYESYESYESYESYES
E[attr="name"]NOYESYESYESYESYESYESYESYESYESYESYES
E[attr~="name"]NOYESYESYESYESYESYESYESYESYESYESYES
E:beforeNONOYESYESBUGGY (4)YESYESYESYESYESYESYES
E:afterNONOYESYESBUGGY (4)YESYESYESYESYESYESYES
CSS 3
↓ Selector / Browser →IE6IE7IE8IE9 previewFF 3FF 3.5FF 3.6Safari 3Safari 4Chrome 5 betaOperaOpera 10.5 beta
↑ Selector / Browser →IE6IE7IE8IE9 previewFF 3FF 3.5FF 3.6Safari 3Safari 4Chrome 5 betaOperaOpera 10.5 beta
E ~ FNOYESYESYESYESYESYESYESYESYESYESYES
E[attr^="name"]NOYESYESYESYESYESYESYESYESYESYESYES
E[attr$="name"]NOYESYESYESYESYESYESYESYESYESYESYES
E[attr*="name"]NOYESYESYESYESYESYESYESYESYESYESYES
E[attr|="name"]NOYESYESYESYESYESYESYESYESYESYESYES
E:rootNONONOYESYESYESYESYESYESYESYESYES
E:nth-of-typeNONONOYESNOYESYESYESYESYESYESYES
E:nth-last-of-typeNONONOYESNOYESYESYESYESYESYESYES
E:first-of-typeNONONOYESNOYESYESYESYESYESYESYES
E:last-of-typeNONONOYESNOYESYESYESYESYESYESYES
E:only-of-typeNONONOYESNOYESYESYESYESYESYESYES
E:only-childNONONOYESYESYESYESYESYESYESYESYES
E:last-childNONONOYESYESYESYESYESYESYESYESYES
E:nth-childNONONOYESNOYESYESYESYESYESYESYES
E:nth-last-childNONONOYESNOYESYESYESYESYESYESYES
E:emptyNONONOYESYESYESYESBUGGY (2)YES (3)YESYESYES
E:targetNONONOYESYESYESYESYESYESYESYESYES
E:checkedNONONOYESYESYESYESYESYESYESYESYES
E::selectionNONONOYESNONONOYESYESYESYESYES
E:enabledNONONOYESYESYESYESYESYESYESYESYES
E:disabledNONONOYESYESYESYESYESYESYESYESYES
E:not(s)NONONOYESYESYESYESYESYESYESYESYES



출처 : https://kimblim.dk/css-tests/selectors/