CSS3 선택자

연결 선택자

'연결 선택자'는 선택자와 선택자를 연결해 적용 대상을 한정시키는 선택자입니다. '컴비네이션 선택자' 또는 '컴비네이션 셀렉터(combination selector)', '조합 선택자'라고도 불립니다.

1. 하위 선택자 - 지정한 모든 하위 요소에 스타일 적용

#container ul {

    border: 1px dotted blue; /* #container 요소의 모든 하위 ul 요소에 파란 1px 실선 */

  }

- 부모 요소에 포함된 자식 요소뿐만 아니라 손자요소, 손자의 손자 요소 등 모든 하위 요소에 스타일이 적용된다.

- 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 공백으로 구분하고 대괄호 안에 속성을 지정한다.

2. 자식 선택자 - 자식 요소에만 스타일 적용

 #container > ul {

  border : 1px dotted blue;  /* #container 요소의 자식 ul 요소에 파란 1px 실선 */

  }

3. 인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용

h1+ul {                /* h1 요소 다음의 첫 번째 ul 요소에 적용할 스타일 */

    color:blue;             

    font-weight:bold;     

  }

4. 형제 선택자 - 형제 요소에 스타일 적용

h1~ul {              /*h1 요소 다음에 오는 모든 ul 요소에 적용할 스타일*/

  color:blue;       

  font-weight:bold; 

}

속성 선택자

1. [속성] 선택자 - 지정한 속성에 스타일 적용

a[href] {

     background:yellow;

}

2. [속성=값] 선택자 - 특정 값을 갖는 속성에 스타일 적용

a[target="_blank"] {

         padding-right:30px;

         background:url(images/newwindow.png) no-repeat center right;

 }

3. [속성 ~=값] 선택자 - 여러 값 중 특정 값이 포함된 속성에 스타일 적용

[class ~="button"] {

        border: 2px solid black;

        box-shadow: rgba(0,0,0,0.4) 5px 5px;

}

4. [속성 |=값] 선택자 - 특정 값이 포함된 속성에 스타일 적용

a[title |="us"] {

        background: url(images/us.png) no-repeat left center;

        padding: 5px 25px;

}

5. [속성 ^=값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용

a[title ^="eng"] {

        background: url(images/us.png) no-repeat left center;

        padding: 5px 25px;

}

6. [속성 $=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용

a[href $= "hwp"] { /* 연결한 파일의 확장자가 hwp인 링크 */

        background: url(images/hwp_icon.gif) center right no-repeat; 

        padding-right: 25px; 

    }

7. [속성 *=값] 선택자 - 값의 일부가 일치하는 속성에 스타일 적용

[href *= "w3"] {

         background:blue;

         color:white;        

}

<출처> Do it! HTML5+CSS3 웹 표준의 정석