CSS 선택자 정리 by 정상혁

여러개의 element 선택

h1, h2 { }

 

class 선택자

p.greentea { } /* class가 greentea인 <p/> 선택 */

.greentea{ } /* class가 greentea인 모든 태그 */

 

id 선택자

#footer { } /* id가 footer인 모든 태그 */

p#footer{}

 

자식(Child) element 선택

div h2{ color:red} /* <div/> 하위에 있는<h2/> 선택  */

.detail p {}   /* class가 "detail"로 지정되어 있는 하위의 <p/> 선택 */

 

상태에 따른 선택자

a:visited{}

a:link {}

상태는 active, hover, link, visited, first-child 등

 

의사(Psdudo) element 선택자

p:first-letter {} 

p:first-line {} 

 

속성(Attribute) 선택자

img[width] {border:black thin solid;} /* width 속성을 가진 모든 이미지 선택 */

img[height="300"] {border:red thin solid; } /* 값이 300인 height 속성을 가진 모든 이미지 선택 */

image[alt~="flowers"]  {border:red thin solid; }  /* "flowers"라는 단어를 포함하는 alt 속성을 가진 모든 이미지 */

 

형제(Sibling) element 선택자

 h1+p {}  /* <h1> 다음에 오는 <p> 선택 */

 

선택자 결합

div#greentea > blockquote {}  /* <blockquote/>의 부모가 되어야하는 "greentea" id를 가진 <div/> 자손 선택자 */

div#greentea > blockquote p {} /* <blockquote/>의 자손이자 "greentea" id를 가진 <div/>의 자손인 <p/> 선택 */

div#greentea > blockquote p:first-line /* 그 <p/>의 첫 줄 */

 

추가: 주로 Head first HTML/CSS에 있는 내용을 정리했어요~ 다른 책도 보고 있는데 계속 내용을 갱신할 예정입니다~


덧글

  • j 2007/09/07 06:11 # 삭제 답글

    저런식으로 코딩하다 웹사이트 개판 되겠군요
  • 정상혁 2007/09/07 10:17 # 답글

    j/ 선택자 결합예제 말씀이신가요? Head first HTML/CSS에 나와 있는 예제인데 모범 실용예제라기보다는 저렇게도 할 수 있다는 예를 보여주는것 같아요. 맨 밑의 예제같은 정도의 다단계의 지정자는 많이 쓰이지는 않겠죠^^; 그래도 만약에 필요한 경우에는 html이 간단해질수 있다면 차라리 css가 복잡해 지는게 나을 것 같다는 생각도 드는군요.
  • 키팅 2007/09/13 11:58 # 삭제 답글

    정리 잘 해놓으셨군요^^/
    유용한 정보가 될 것 같아요~*
    html의 구조화를 위해 css가 참 고생이 많아요^^;
  • 정상혁 2007/09/17 19:07 # 답글

    키팅/ 디자이너가 아니라서 그런지 맨날 헷갈려서 정리해봤어요 ^^
댓글 입력 영역