p[class~="warm"] {color : red;}

클레스 명에 warm 이 들어간 텍스트를 붉은 색으로 표시한다
<span class="warm small">따듯한글씨</span>

img [title~="orange"] {boder: 1px splid orange}

이미지 타이틀에 orange 이들어간 이미지에 주황색 테두리가 보인다.

<익스플로어 7부터 사용가능>
span[class*="i"]{font-style: italic; } 클래스에 i 가 들어있는 속성을 선택하여 이탤릭
span[class^="head"]{font-weight; bold; } 클래스가 head로 시작하는 속성을 선택 하여 볼드
span[class$="cold"]{color; blue; } 클래스에 cold 가 들어있는 속성을 선택하여 파란색

특정 속성 선택자
======================================================
img[src|="cat"] {boder: 1px solid red;}
파일명에 cat이 들어있는 이미지에 붉은 테두리를 표시합니다.

자식요소 선택자
======================================================
h1 > strong {color:red}
h1 아래의 strong 요소를 빨간색으로 표현한다
<h1><strong>여기</strong>를 누르시면 메인으로 이동합니다.</h1>

인접형제 요소 선택
======================================================
h1 + p {margin-top: 0;}
h1 요소 바로 다음에 나오는 문단의 상단 마진이 0이 된다.

동적인 가상클래스
======================================================

body* : hover {backgronud: yellow;}
바디 모든 요소의 배경을 마우스가 머물고 있는 상태에서 노란색으로 변경한다

input:focus {backgrond: silver; font-weight: bold;}
포커스를 갖고 있는 폼요소를 강조해서 보여준다
-> 익스플러어 6,7 적용안됨

p:first-letter {color: red;}
문단 첫번째 글자만 붉게 표시한다

p:first-line { color:gray}
문단 첫줄에 글자색이 회색으로 표현된다.

h2:before{content: "TT"; color: red;}
h2 요소 앞에 TT 를 삽입한다.

h2:after{content: "TT"; color: red;}
h2 요소 뒤에 TT 를 삽입한다.