원본 본문으로 이동하기

CSS 4 에 추가될 기능들.

박용서 - 공식문서 https://www.w3.org/TR/selectors4/ 국내 익스 환경으로 빨라도 5년 뒤에나 쓰일 것 같지만.. CSS 4의 몇가지 기능을 소개합니다. matches() 선택 그냥 상속이 있었으면 좋았겠지만... 유사한 기능인 matches 가 들어가 css 파일의 글자수를 줄일 수 있습니다. #gs .saro .me input[type=text], #gs .saro .me input[type=button], #gs .saro .me input[type=button]:hover { /* 무적홍보.. */ } 아래와 같이 :matches 를 통해 묶을 수 있습니다. #gs .saro .me input:matches([type=text], [type=button], [type=button]:hover) { /* 무적홍보.. */ } :not 보강 :not(:link):not(:visited) { /* css 3 */ } :not(:link, :visited) { /* css 4 */ } :local-link 사이트 내부로 연결되는 링크에는 다른 효과를 줄 수 있습니다. - 그리고.. :local-link(n) : n -> 경로단계 에 따른 효과를 줄 수 있습니다... <a href="/">:local-link(0) 선택됨</a> <a href="/saro/">:local-link(1) 선택됨</a> <a href="/saro/notice/">:local-link(2) 선택됨</a> <a href="/saro/notice/321">:local-link(3) 선택됨</a> <a href="/saro/notice/321/edit">:local-link(4) 선택됨 ... 그만해..</a> a:local-link { /* 사이트 내부 경로 전체 */ } a:local-link(0) { /* 사이트 내부 경로 루트 */ } a:local-link(1) { /* 사이트 내부 경로 1단계 */ } a:local-link(2) { /* 사이트 내부 경로 2단계 */ } a:local-link(3) { /* 사이트 내부 경로 3단계 */ } a:local-link(4) { /* 사이트 내부 경로 4단계 */ } 기타 - 그밖에도 https://www.w3.org/TR/selectors4/ 에 가시면 많은 예제들이 있습니다. - 그냥 상속 넣어주면 안되나요... - HTML CSS