연결 선택자
'연결 선택자'는 선택자와 선택자를 연결해 적용 대상을 한정시키는 선택자입니다. '컴비네이션 선택자' 또는 '컴비네이션 셀렉터(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 웹 표준의 정석
'IT > CSS' 카테고리의 다른 글
| [CSS 입문] 표 스타일 속성 (0) | 2017.04.19 |
|---|---|
| [CSS 입문] 다단 관련 속성 (0) | 2017.04.19 |
| [CSS 입문] CSS 포지셔닝의 주요 속성들 (0) | 2017.04.17 |
| [CSS 입문] 여백을 조절하는 속성 (0) | 2017.04.17 |
| [CSS 입문] 테두리 관련 속성 (2) | 2017.04.13 |