CSS의 선택자

- 엘리먼트선택자.(Element Selection)

엘리먼트 선택자는 기본적인 태그명을 작성하고 그에 따른 CSS를 기입하는 방법이다.

예) Tag{ 스타일시트 }

 

- 아이디 선택자(Identity Selection)

태그중 특정태그에 적용된 id값을 찾아서 적용되는 CSS입니다.

예)#ID{ 스타일시트 }

 

- 클래스 선택자(Class Selection)

태그중 특정 태그에 적용된 class를 찾아서 적용되는 CSS입니다.

예) .class{ 스타일시트 }

 

- 전체선택자(All Selection / universal Selection)

전체선택자는 해당 페이지가 적용되는 모든 태그에 적용합니다.

예) *{ 스타일시트 }

 

- 임폴트선택자(링크선택자 / Import Selection)

임폴트(css를 문서 오는 경우)에 쓰이는 선택자.

예) @import url("경로")

 

- 중요구문 선택자. (important Selection)

css의 로딩인식순서와 상관없이 가장 먼저 읽히 도록 설정하는 선택자.

예) .class {color:red; !important }

 

- 객체상속선택자. (하위선택자 / descendant Selection)

특정 태그 또는 아이디 또는 클래스 이하의 특정 부분에 css를 먹이는 선택자.

예) #ID Tag{ 스타일시트 }

예) #ID.class{ 스타일 시트 }

예) .class .class{ 스타일시트 }

예) .class Tag{ 스타일시트 }

예) Tag Tag{ 스타일시트 }

등 복합적으로 혼합 가능.

단 객체상속선택자는 해당하는 부분이 아니여도 적용되는 사례가 종종 발견됨.;;

 

 

- 자식선택자. (child Selection)

특정 엘리먼트 또는 아이디 또는 클래스에서 바로 하위의 특정 엘리먼트 , 아이디 , 클래스를 선택하는 선택자.

(중첩으로 들어가게 되면 중첩된 엘리먼트는 무시)

예) html > body{ 스타일시트 }

 

 

- 인접형제선택자. (adjacent sibling Selection)

특정엘리먼트 또는 아이디 또는 클래스가 닫힌후 처음나오는 특정 엘리먼트, 아이디 ,클래스를 선택하는 선택자.

예) div + p{ 스타일시트 }

 

- 속성선택자. (attribute Selection)

특정엘리먼트에서 어떠한 속성이 존재할경우, 그 속성을 가진 특정엘리먼트를 선택하는 선택자.

예) table[border]{ 스타일시트 }

 

- 유사클래스선택자 (이벤트 체크 선택자 / pseudo-class Seletion)

특정클래스에 마우스에 따른 특정한 이벤트(또는 액션)이 일어날경우에 적용되는 상황을 선택해주는 선택자.

예) a:hover{ 스타일시트 }

예) td:hover{ 스타일시트 }

유사 클래스 선택자 종류(CSS 2.0)

:active         마우스가 onmousedown이 되어있는상태.(왼쪽클릭을 한후 때지 않은상태)

:focus         tabindex focus가 맞추어져 있는 상태. - IE는 안됨

:hover         마우스가 올라가 있는 상태.

:link            들리지 않은 링크(페이지가 열린적이 없음)

:visited        들른후의 링크(페이지가 열린적이 있음)

:first-child    한 엘리먼트 내에서 존재하는 엘리먼트중 가장 처음 엘리먼트- IE는 안됨

:lang           특정 인코딩셋을 사용하는 엘리먼트.- IE는 안됨

 

- 유사엘리먼트선택자 (이벤트 체크 선택자 / pseudo-element Seletion)

특정엘리먼트에 추가 또는 특정부분에 적용 하는 선택자입니다.

예) a:first_letter{ 스타일시트 }

예) td:before{ 스타일시트 }

유사 엘리먼트 선택자 종류(CSS 2.0)

:first-letter  엘리먼트 내에서 가장 처음에 나오는 글자.

:first-line 엘리먼트내에서 가장 먼저나오는, 줄바끔이 되기전까지의 문단.

:before 해당하는 엘리먼트에서 바로 전 에 나오는내용 (content라는 내용을 주로 쓰는듯) - IE는 안됩니다.

:after  해당하는 엘리먼트에서 바로 후 에 나오는내용 (content라는 내용을 주로 쓰는듯) - IE는 안됩니다.

 

- 주황색 부분은 되는걸로 압니다만..

- 녹색부분은 불여우2.0 이상이나 익스7.0 이상에서 해야 제대로 동작하는걸로 압니다 ^ㅡ^)b

 

 

ⓒ CSS마스터전략(앤디버드) + 제 개인적인 지식 + luka님. + w3schools

ⓒ http://cafe.naver.com/hacosa.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=1442

[출처] 희안님의 글을 보고 정리한 CSS의 선택자|작성자 셀레베스