[두잇 HTML5+CSS3 웹표준의 정석] Part12

연결 선택자

상위요소 하위요소	하위요소 모두에 스타일이 적용	하위요소는 자식뿐만 아니라 손자요소, 손자의 요소까지 적용됨.
부모요소 > 자식요소	자식요소에만 스타일을 적용
요소1 + 요소2	요소1과 2는 같은 레벨이면서 요소1 이후 맨 먼저 오는 요소2에 스타일을 적용한다	같은 부모요소를 가지고 있는 형제관계에서 먼저 나오는 요소를 '형요소' 나중에 나오는 요소를 '동생요소'라 하는데 첫번째 동생 요소에만 스타일이 적용된다.
요소1 ~ 요소2	모든 형제 요소에 적용된다	h1~p{}일 경우, h1 다음에 오는 모든 형제 p요소에 해당된다.

 

속성 선택자

[속성]	지정한 속성에 스타일 적용
[속성=값]	특정값을 갖는 속성에 스타일 적용	예 ) [target="_blank"]
[속성~=]	여러 값 중 특정 값이 포함된 속성에 스타일 적용하기	예 ) [class~="button"]일 경우 button이라는 값이 포함된 요소의 스타일을 정의한다. flat button처럼 두개이상 속성값중 포함되면 적용되지만 하이픈으로 연결되거나 buttons 처럼 일부 일치할때는 적용되지 않는다.
[속성 | =]	특정 값이 포함된 속성에 스타일 적용하기	한 단어로 정의 되어야하며 하이픈(-)이 적용된다.
[속성 ^=]	특정 값으로 시작하는 속성에 적용	예 ) a[title^=jap]일 때 title=japanese에 적용 가능하다.
[속성 $=]	특정 값으로 끝나는 속성에 적용	위의 속성과 마찬가지로 이 속성은 끝날 때 적용된다.
[속성 *=]	값의 일부가 일치하는 속성에 적용	앞뒤 상관없이 속성값이 어느 위치에든 값이 포함되면 적용된다.

 

가상 클래스

: link	방문하지 않은 링크에 스타일 적용
: visited	방문한 링크에 스타일 적용
: hover	마우스 커서를 올려놨을 때 스타일 적용
: active	마우스를 클릭 했을 때 스타일 적용
: focus	지정한 요소에 초점이 맞춰졌을 때 스타일 적용

* 선택자 순서에 주의해야한다. :link선택자부터 정의하고 :visited, :hover, :active, 순서대로 해야한다. 그렇지 않으면 스타일이 제대로 적용되지 않는다. *

 

:enabled와 :disabled	요소를 사용할 수 있을 때와 없을 때의 스타일 지정	예를 들어 textarea를 사용했을 때 게시판 입력화면으로 사용할 경우 enabled지만 회원약관 등은 사용자가 내용을 보기만하므로 disabled
:checked	라디오박스나 체크박스에서 해당 항목을 선택했을 때 스타일 지정	해당 항목을 선택했을 때 스타일을 지정한다.

 

nth-child(n) nth-last-child(n) A:nth-of-type(n) A:nth-last-of-type(n)

부모안에 모든 요소중 앞에서부터 n번째 부모안에 모든 요소중 뒤에서부터 n번째 부모안에 A 요소중 앞에서부터 n번째 부모안에 A 요소중 뒤에서부터 n번째

first-child last-child first-of-type last-of-type

부모안에 모든 요소중 첫번째 자식요소 부모안에 모든 요소중 마지막 자식요소 부모안에 A 요소중 첫번째 요소 부모안에 A 요소중 마지막 요소

only-child only-of-type

부모 안에 자식요소가 하나뿐일 때 자식요소에 스타일 적용 (다른 자식요소 있으면 안 됨) 해당 요소가 유일한 요소일 때 스타일 적용(다른 자식요소 있어도 됨)

 

가상 요소

::first-line 요소와 ::first-letter 요소 ::befor, ::after 요소

첫 번째 줄이나 첫 번째 글자에 스타일을 적용한다. 단 첫 번째 글자는 첫 번째 줄에 있어야 한다. 내용 앞뒤에 텍스트나 이미지 등을 추가할 수 있습니다.

::after 예시 )
ul li::after{
	content:"NEW!";
        font-size:xx-small;
        padding:2px 4px;
        background:#f000;
        ...
}