블로그 이미지
GUCCI

카테고리

전체보기 (111)
여행 (1)
기기 (2)
쇼핑 (0)
게임 (0)
etc. (6)
취업이야기 (0)
업무일지 (5)
리눅스 (38)
웹프로그래밍 (2)
네트워크 (4)
JAVA (17)
Android (0)
IOS (2)
LUA (8)
C/C++ (1)
Objective C (2)
SERVER (2)
그누보드4 (1)
MSSQL (2)
Programming (1)
자바스크립트 (4)
HTML/CSS (1)
LGNAS (0)
Total
Today
Yesterday

CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY

This page has not been updated for some time and some of the browser versions are obsolete - I'm working on a better format for the page, so check back every now and then :)

The following is a range of CSS tests of the most common browsers' support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3). If you feel like reading more about the selectors and which attributes they support, the W3C is the place to go!

If you spot any errors (it happens to us all...) or have any comments, please email me at kimblim at gmail dot com.

Click here to see this page's history.

Bookmark and Share

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
EYES YES YES YES YES YES YES YES YES YES YES YES
E FYES YES YES YES YES YES YES YES YES YES YES YES
:linkYES YES YES YES YES YES YES YES YES YES YES YES
E:activeYES YES YES YES YES YES YES YES YES YES YES YES
E:visitedYES YES YES YES YES YES YES YES YES YES YES YES
E:first-lineNO YES YES YES YES YES YES YES YES YES YES YES
E:first-letterNO YES YES YES YES YES YES YES YES YES YES YES
E.classnameYES YES YES YES YES YES YES YES YES YES YES YES
E#idYES YES YES YES YES YES YES YES YES YES YES YES
.classname.classnameNO YES YES YES YES YES YES YES YES YES YES YES
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
*YES YES YES YES YES YES YES YES YES YES YES YES
E > FNO YES YES YES YES YES YES YES YES YES YES YES
E:first-childNO YES YES YES YES YES YES YES YES YES YES YES
E:hoverPARTIAL(1) YES YES YES YES YES YES YES YES YES YES YES
E:focusNO NO YES YES YES YES YES YES YES YES YES YES
E + FNO YES YES YES YES YES YES YES YES BUGGY (5) YES YES
E[attr]NO YES YES YES YES YES YES YES YES YES YES YES
E[attr="name"]NO YES YES YES YES YES YES YES YES YES YES YES
E[attr~="name"]NO YES YES YES YES YES YES YES YES YES YES YES
E:beforeNO NO YES YES BUGGY (4) YES YES YES YES YES YES YES
E:afterNO NO YES YES BUGGY (4) YES YES YES YES YES YES YES
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 ~ FNO YES YES YES YES YES YES YES YES YES YES YES
E[attr^="name"]NO YES YES YES YES YES YES YES YES YES YES YES
E[attr$="name"]NO YES YES YES YES YES YES YES YES YES YES YES
E[attr*="name"]NO YES YES YES YES YES YES YES YES YES YES YES
E[attr|="name"]NO YES YES YES YES YES YES YES YES YES YES YES
E:rootNO NO NO YES YES YES YES YES YES YES YES YES
E:nth-of-typeNO NO NO YES NO YES YES YES YES YES YES YES
E:nth-last-of-typeNO NO NO YES NO YES YES YES YES YES YES YES
E:first-of-typeNO NO NO YES NO YES YES YES YES YES YES YES
E:last-of-typeNO NO NO YES NO YES YES YES YES YES YES YES
E:only-of-typeNO NO NO YES NO YES YES YES YES YES YES YES
E:only-childNO NO NO YES YES YES YES YES YES YES YES YES
E:last-childNO NO NO YES YES YES YES YES YES YES YES YES
E:nth-childNO NO NO YES NO YES YES YES YES YES YES YES
E:nth-last-childNO NO NO YES NO YES YES YES YES YES YES YES
E:emptyNO NO NO YES YES YES YES BUGGY (2) YES (3) YES YES YES
E:targetNO NO NO YES YES YES YES YES YES YES YES YES
E:checkedNO NO NO YES YES YES YES YES YES YES YES YES
E::selectionNO NO NO YES NO NO NO YES YES YES YES YES
E:enabledNO NO NO YES YES YES YES YES YES YES YES YES
E:disabledNO NO NO YES YES YES YES YES YES YES YES YES
E:not(s)NO NO NO YES YES YES YES YES YES YES YES YES
  1. :hover only works for a-elements in IE6.
  2. E:empty seems to have some buggy behaviour in webkit-based browsers.
  3. Not sure how to test if this is still buggy.
  4. Tim has informed that the :before and :after selectors are buggy in Firefox versions before 3.5. Apparently they do not allow inserted elements to have fixed width/height or absolute positioning. I haven't checked this out myself. Thanx, Tim! Update: It certainly seems as if Tim is right - in Nicolas Gallaghers great demo about multiple backgrounds using CSS2.1, he also points this out.
  5. It seems that Chrome (at least on a Mac) has some issues with the adjacent selectors - I've created a test page to demonstrate it. It does not seem to be a Webkit issue, as Safari has no issues with this.
History (not complete):
2011.04.13: I've discovered a bug in Google Chrome regarding the adjacent selectors and created a test page to demonstrate the problem. The bug is fixed in v11 of Chrome.
2010.03.18: Opera 10b3 replaced with Opera 10.5 betaChrome 2 replaced with Chrome 5 betaFirefox 2 replaced with Firefox 3.6Internet Explorer 9 developer preview added.
2009.08.19: Konqueror removed as I have no way of testing it. Opera 10 beta added. Test for :not added.
2009.08.05: Firefox 3.5 beta 4 replaced with the final version. Chrome 1 replaced with Chrome 5 beta. Also changed lightbox functionality.
2009.06.15: Firefox 3.5 beta 4 added to the matrix
2009.06.11: Safari 4 beta replaced with the final version
2009.03.17: Safari 4 beta added
2009.03.04: Completely redone! New matrix overview, more selectors, better tests, more browsers. Removed min-width and max-width as they are not selectors.
2008.10.31: Internet Explorer 8 beta 2 added - major improvements compared to IE7!
2008.09.11: Google Chrome added
2008.06.27: Removed Firefox1.5 and inserted Firefox 3 instead. Also updated all the Safari tests to Safari3.
2007.07.13: Corrected the :checked test. Seems as if Firefox does support the selector, it just doesn't support red borders on checkboxes...
2007.03.16: Added :checked test
2007.01.12: I have added Konqueror 3.5.5 - which aces all the tests!
2007.01.09: I have added Firefox 2.0.0.1
2007.01.04: Added :nth-child test
2007.01.04: Improved the examples for :min-width and :max-width.
2007.01.02: I have added Opera 9.10 and there are some stats at the bottom of the page now...
2006: Created...
Posted by GUCCI
, |

컨트롤할 HTML태그를 셀렉터(Selector)로 지정할 수 있다.

$(function(){

$("셀렉터").jQuery 명령

});

 

 

1. CSS 셀렉터들

 

1.1 태그셀렉터

 

예] '목록태그<li>의 css 컬러 속성값을 블루로 바꿔라'

$(function(){

$("li").css("color","blue");

});

 

1.2 ID셀렉터, Class(클래스)셀렉터

 

예] '목록태그<li>중 id="first"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li#first").css("color","blue");

});

예] '목록태그<li>중 class="first"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li.first").css("color","blue");

});

 

1.3 자손셀렉터

포인트는 부모 자식요소 사이를 한칸뛰우기

 

예] 'class="first"인 요소의 자손, <em>을 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$(".first em").css("color","blue");

});

 

1.4 유니버셜셀렉터

예] '목록태그<li>의 모든자손요소(*)들을 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li *").css("color","blue");

});

 

1.5 그룹셀렉터

여러개의 셀렉터를 ,(콤마)로 지정

 

예] 'id="first"인 요소와 id="second"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("#first, #second").css("color","blue");

});

 

 

2. CSS2 셀렉터

 

2.1 자식셀렉터

 

예] '목록태그<li>의 자식요소중 <strong>태그를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li > strong").css("color","blue");

});

 

2.2 인접셀렉터

 

예] 'id="first"인 목록태그<li> 바로 다음에 오는 요소<li>를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("#first + li").css("color","blue");

});

 

2.3 first-child클래스

 

예] '처음 나오는 <li>요소를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:first-child").css("color","blue");

});

 

 

3. CSS3셀렉터

 

3.1 간접셀렉터

특정 셀렉터 뒤에 있는 태그를 선택할 수 있다. 셀렉터와 태그사이 ~(틸드)로 연결한다.

 

예] ' id="second"인 요소뒤의 나오는 <li>태그들의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("#second ~ li").css("color","blue");

});

 

3.2 부정 수도클래스 (Negation pseudo-class)

셀렉터 안 태그 중 특정 조건을 제외한 태그를 지정할 수 있다.

셀렉터 뒤에 :not(...)을 붙이고 제외 조건을 명시한다.

 

예] '첫번째 <li>를 제외하고 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:not(first-child)").css("color","blue");

});

 

3.3 empty 수도클래스 (empty pseudo-class)

자식 태그나 텍스트를 포함하지 않는 태그를 선택할 수 있다.

셀렉터 뒤에 :empty를 붙인다.

 

예] '내용이 없는 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:empty").css("color","blue");

});

 

3.4 nth-child 수도클래스 (nth-child pseudo-class)

셀렉터의 태그 중 번호를 지정하여 태그를 지정할 수 있다.

짝수는 $("li:nth-child(even)"), 홀수는 $("li:nth-child(odd)"), 3의 배수면 $("li:nth-child(3n)")으로 지정할 수 있다.

 

예] '<li>태그중 두번째 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:nth-child(2)").css("color","blue");

});

 

3.5 last-child 수도클래스 (last-child pseudo-class)

특정 셀렉터 안에 가장 마지막 태그를 선택할 수 있다.

 

예] '<li>태그중 가장 마지막 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:last-child").css("color","blue");

});

 

3.6 only-child 수도클래스 (only-child pseudo-class)

셀렉터에 특정 태그가 한 개만 포함되어 있을 경우 선택할 수 있다.

 

예] '<li>태그 안에 <span>태그가 한 개만 포함하고 있는 경우, 그 <span>태그의  css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li span:only-child").css("color","blue");

});

 

 

4 CSS 속성 셀렉터

 

4.1 [attribite]

특정 속성을 가진 태그를 선택 할 수 있다.

 

예] ' id속성을 가진 태그들의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[id]").css("color","blue");

});

 

4.2 [attribite='value']

속성이 특정한 값을 가진 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "img"인 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title=img]").css("color","blue");

});

 

4.3 [attribite!='value']

특정 속성이 특정한 값을 갖지 않는 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "img"가 아닌 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title=img]").css("color","blue");

});

 

4.4 [attribite^='value']

특정 속성값이 특정 문자열로 시작되고 있는 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "a"로 시작하는 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title^='a']").css("color","blue");

});

 

4.5 [attribite$='value']

특정 속성값이 특정 문자열로 끝나는 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "z"로 끝나는 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title$='z']").css("color","blue");

});

 

4.6 [attribite*='value']

특정 문자열을 포함하고 있는 태그를 선택 할 수 있다.

 

예] ' title 속성의 값이 "ing"를 포함하고 있는 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title*='ing']").css("color","blue");

});

 

 

5. 제이쿼리(jQuery) 자체 필터

제이쿼리(jQuery)에서는 CSS 셀렉터 이외에도 자체적으로 제공하는 셀렉터인 "필터"를 이용할 수 있다.

 

5.1 first 필터/ last 필터

셀렉터 안에서 첫 태그를 "first 필터", 마지막 태그를 "last 필터"로 지정할 수 있다.

 

$("li:first").css("color","blue");

$("li:last").css("color","blue");

 

5.2 even 필터/ odd 필터

셀렉터 안에서 짝수 번째 태그를 "even필터", 홀수 번째 태그를 "odd필터"로 지정할 수 있다.

 

$("li:even").css("color","blue");

$("li:odd").css("color","blue");

 

5.3 eq 필터/ gt 필터 / lt 필터

셀렉터 안에서 특정 순서의 태그를 "eq 필터"(equal), 특정 태그보다 앞의 태그를 "lt 필터"(less than), 뒤의 태그를 "gt필터"(greater than)로 선택할 수 있다.

 

$("li:lt(1)").css("color","red");

$("li:eq(1)").css("color","green");

$("li:gt(1)").css("color","blue");

 

5.4 header 필터

h1~h6까지의 heading 태그를 함께 선택할 수 있다.

 

$(":header)").css("color","blue");

 

5.5 contains 필터 / has 필터

"contains필터"는 특정 문자열이 포함되어 있는 태그를 "has필터"는 특정 태그가 포함되어 있는 태그를 선택할 수 있다.

 

$("li:contains('동영상')").css("color","blue");

$("li:has(em)").css("color","green");

 

5.6 parent 필터

어떤 태그의 자식 태그 혹은 문자열을 포함하는 태그를 선택할 수 있는 empty 수도클래스와 반대되는 필터이다. 

$("li:parent").css("color","red");

'자바스크립트 > JQuery' 카테고리의 다른 글

jQuery checkbox control  (2) 2012.06.14
jQuery Form Validation Plugin  (5) 2012.02.28
Posted by GUCCI
, |

루아(LUA) 강좌 자료

LUA / 2012. 3. 5. 10:36
 
1 소개
2 루아가 뭐지?
3 lua 소식
4 링크
5 바인딩
6 주요 확장 라이브러리
6.1 쓸만하지만 수정해서 사용할만한 것들
6.2 아주 국한적인 용도
7 IDE
8 역컴파일러
9 관련 프로젝트
10 메뉴얼
11 주요 아티클들
12 번역 및 팁
13 기타
14 patch

1 소개 #

  • "스크립트"를 임베딩하는 게임시스템 제작은 상당히 구조적이고 재활용적인 코딩을 하게 만든다는 점에서 매력이 있는 것 같습니다. (불타오르고 있는~ 활활~ 간단히 말해 재미있습니다! o^.^o

2 루아가 뭐지? #

  • lua/소개논문 - DDJ에 96년도에 실렸던 루아에 대한 소개글 번역입니다.
  • Lua vs Python - 루아와 요즘 상당히 각광받는 파이선과의 성능비교입니다. 혹시나 파이선 좋아하시는 분들은 그런가보군하고 읽어주시길...

3 lua 소식 #

  • [http]http://www.lua.org/ftp/lua-5.0.2.tar.gz - 현재 정식 버전인 lua 5.0.2. 5.0에서의 몇몇 치명적인 버그를 패치한 버전입니다.
  • lua 5.1 work6이 릴리스되었습니다. [http]http://www.lua.org/work/lua-5.1-work6.tar.gz에서 받을 수 있습니다.
    • work6에서의 두드러진 달라진 점
      • lualib.a가 lua.a로 병합되었습니다
      • "loadlib"함수가 package의 맴버로 들어갔습니다
      • 모든 타입에서 메타테이블이 가능합니다 단, 여전히 __gc는 일반 userdata에서만 가능(lightuserdata 지원 X)
      • 나머지 연산자 ('%') 추가 -> __mod 메타메소드에 대응
      • 새로운 연산자 *t 추가(테이블 t의 크기) --> __siz 메타메소드에 대응
    • 기존 5.0.2와의 차이
      1. lua_gc() API : 아직 문서화는 되어있지 않지만 아마도 가장 큰 차이일듯. GC처리량을 세부적으로 지정할 수 있도록 한 것 같습니다.
      2. 정수형 타입이 생겼네요. integer라는 별도의 타입으로 관리됩니다.
      3. 메모리 할당 함수를 별도의 함수포인터로 뽑아놓았네요. 메모리 풀링과 같이 별도의 malloc()을 만들어 처리해야할 경우 유용할 듯.
      4. luaconf.h라는 별도 설정용 헤더화일이 있습니다.
      5. luaL_setfield() / luaL_getfield() 가 생겼습니다. 테이블에서 문자열 인덱스로 지정된 값을 . 연산자를 사용해서 바로 접근할수 있도록 한 기능을 API에도 마련을 했네요. 
  • [http]http://www.lua.org/pil/ - programming in lua. 루아 관련 최초의 책이죠. 온라인으로 공개했네요.
  • [http]http://www.lua.org/ftp/refman-5.0.pdf - 레퍼런스 메뉴얼
  • [http]http://sourceforge.net/project/showfiles.php?group_id=32250 - short 레퍼런스 (루아5)
  • lua 5.0 beta의 비호환성요소들 - 메일링리스트에서 퍼왔습니다.
  • Lua/5.0.2/Note - 5.0.2버전에서의 경험담.
  • [http]lua 5 내부구조 - lua의 동작원리를 설명한 논문

4 링크 #

5 바인딩 #

  • [http]http://lua-users.org/wiki/CppBindingWithLunar - C++ 인스턴스를 바인딩하는데는 가장 간편한 방법일 듯 합니다. 버전 5.0 이상.
  • Luabind - C++ 코드를 루아로 올려주는 템플릿 라이브러리. boost.python에 영향을 받은 듯. 루아 5 전용.
  • [http]LuaPlus - C++ 바인딩 라이브러리. 표준 루아 소스를 다소 변형시켜 구현하고 있다는 것이 흠. (즉, 루아자체가 리뉴얼되면 호환성 미지수. 업글이 한박자 늦을듯.)
  • [http]http://www.tecgraf.puc-rio.br/~celes/tolua/ - C++ 바인딩 툴. 별도의 전처리과정 필요. 루아 5 지원.
  • CaLua 이야기 - C <-> 루아 바인딩 라이브러리. 꽤 사용하기 편함. LGPL 라이센스. 루아 5 전용.
  • [http]http://www.fscnation.com/users/glo/CPB/ - 괜찮은 아이디어의 C->lua바인딩 라이브러리. vc.net 전용인 것이 흠. 

6 주요 확장 라이브러리 #

6.1 쓸만하지만 수정해서 사용할만한 것들 #

6.2 아주 국한적인 용도 #

7 IDE #

  • 개인적으로는 scite가 가장 유용합니다. :)
  • [http]http://blua.sourceforge.net/ - WOW 에디팅용으로 개발된 듯한 lua IDE. 아직 화일은 정식릴리스되지 않음. java로 개발.

8 역컴파일러 #

완벽한 역컴파일은 하지 못한다. 소스를 잃었을 경우 사용하면 좋을듯.

9 관련 프로젝트 #

  • [http]mod_lua - php와 같이 lua를 사용할 수 있도록 해주는 아파치 모듈. 

10 메뉴얼 #

  • LUA 5.0 C API 메뉴얼 번역 - Lua 5.0에서는 이전 버젼과 많이 바뀌었더군요. (덕분에 프로젝트 중에 코드를 엎고 있답니다.:( ) 그래서 번역을 해보고 있습니다. 정식이 아니라 5.0 알파버젼을 기준으로 한 것임을 밝힙니다.
  • LUA 5.0 auxlib 문서 - lua-users.org의 위키에서 퍼왔습니다. 표준 메뉴얼에는 설명이 생략되었지만 꽤 자주쓰이는 함수들이죠.
  • LUA/메타테이블이야기 - Lua 5.0에서의 메타테이블에 대한 번역입니다. 프로그래밍 레퍼런스에서 추출해 정리했습니다.
  • LUA/coroutine - 5.0beta 이후부터 사용가능한 coroutine에 대한 내용.
  • C에서 Lua호출하기 - 파연님의 강요(?)로 작성해보았습니다.
  • LUA/string라이브러리 - 문자열 관련 라이브러리 테이블인 string에 대한 부분만 정리, 번역했습니다.
  • LUA/화일입출력 - 화일 입출력에 대해 간단히 정리.
  • LUA 튜토리얼 - 자작 튜토리얼입니다. 

11 주요 아티클들 #

12 번역 및 팁 #

13 기타 #

14 patch #

  • 루아자체가 오픈소스라 일부기능을 고치면 꽤 쓸만한 부분이 있더군요. lua-user 위키에서 배껴와 정리합니다.
  • [http]http://lua-users.org/wiki/ResumableVmPatch - 기존 coroutine에 이식성을 희생하지 않고 몇가지 기능을 덧붙인 것. 표준에 포함되면 좋겠다. :) 5.1 work5 버전 전용.
  • LUA/patch/rubylikeself - ruby 스크립트의 @ 연산자 활용을 lua에 적용한 패치
  • [http]http://lua-users.org/wiki/ImprovedCoroutinesPatch - (5.0.2) coroutine의 효율을 높인 패치. 완전히 새로운 API 제시.

'LUA' 카테고리의 다른 글

Lua 04. 문자열  (1) 2012.03.05
Lua 03. math  (3) 2012.03.05
Lua 02. 함수  (1) 2012.03.05
Lua 01. 문법  (0) 2012.03.05
Luci Reference: Templates  (3) 2012.02.17
Posted by GUCCI
, |

최근에 달린 댓글

글 보관함