css 선택자
타입선택자 (type selector)
body,div 등 요소명에 직접 선택하는것
ex) body { margin:0; padding:0 }
전체선택자 (universal selector)
모든 요소에 대한 스타일 지정
* { color:#ff000; }
id선택자
html문서 안에서 단 하나의 요소만 선택할때만 사용
ex) #layer { width:100px; height:100px; }
class선택자
html문서 안에서 복수로 선택할때 사용
ex) .content { width:100px; height:100px; }
속성 선택자 (attribute selector)
속성명이나 속성값을 가진 요소에 스타일을줌
div[id] { color:#ff0000; } -> div에 id속성을 선택( 요소명[속성명] )
div[id="layer1"] { color:#ff0000; } -> div의 id속성의 값이 layer1을 선택 (요소명[속성명="속성값"])
div[class~="box"] { color:#ff0000; } -> class속성을 복수로지정한 경우 box라는 값이 있으면 선택 (요소명[속성명~="속성값"])
div[id^="box"] { width:100px; } -> div의 id속성의 값이 box로 시작하는 속성값을 선택(요소명[속성명^="속성값"])
a[href$=".com"] { color:#000; } -> 속성의 속성값의 뒷부분이 같을경우 선택 (요소명[속성명$="속성값"])
div[class*="box"] { color:#000; } -> 속성값에 속성값이 한개 이상 포함된 경우 (요소명[속성명*="속성값"])
이밖에 요소명[속성명|="속성값"], 요소명[속성명~="속성값"]
자손 선택자 (descendant selector)
요소의 자식요소를 선택할때 사용. 공백으로 구분.
ex) div#layer span { background:#000; }
자식 선택자(child selector)
바로 아래 자식요소를 선택. 그 아래 요소는 선택되지 않음
ex)ul > li { width:200px; }
인접 선택자
동일한 위치에 있는 요소들 선택
ex)div + p { color:#000; }
<div>젤라의 작업실</div>
<p>젤라의 작업실 인접</p>
선택자 복수로 선택
두개 이상의 선택자들에 스타일을 줄땐 ','로 구분
ex)div.box, div.layer { color:#000; }
가상클래스
:first-child
첫번째 자식 요소를 선택
ex)li:first-child { background:#ff0000; }
:last-child
마지막 자식요소를 선택
ex)li:last-child { background:#ff0000; }
가상요소
:first-line
요소의 첫번째 줄에 스타일지정
:first-letter
요소의 첫번째 문자에 스타일 지정
링크 가상클래스
:link
열린적 없는 링크 선택
:visited
한번 이상 방문한 링크 선택
다이나믹 가상클래스
:hover
마우스가 요소 위에 올라가있는 상태
:actiove
실행중인 상태.마우스가 클릭된상태
:focus
요소가 포커스 된 상태. tab으로 선택되었거나, 입력폼이 선택되어있는 상태
:before
앞부분 내용을 생성할때
:after
뒷부분 내용을 생성할때
언어 가상클래스
:lang
