가리사니의 조각들...
[백업][가리사니] css 4 에 추가될 기능들.
css, html
박용서 • 2016-04-12

이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.

공식문서 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단계 */ }

기타