TIL

[CSS] CSS 선택자 : 연결 선택자, 속성 선택자

온풀 2020. 11. 25. 17:15

연결 선택자

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

section p { color: blue; }
  • section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 지정함

2. 자식 선택자 : 자식 요소에만 스타일 적용하기

section > p {color: blue; }
  • section 요소 안에 포함된 p 요소 중 자식 p 요소에만 파란(blue) 글자 색을 적용함
  • 하위 선택자와 달리 손자 요소에는 스타일이 적용되지 않음

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

h1 + p { text-decoration: underline; }
  • 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용됨

4. 형제 선택자 : 형제 요소에 스타일 적용하기

h1 ~ p { text-decoration: underline; }
  • 형제 요소들에 스타일을 정의함
  • 인접 형제 선택자와 달리 모든 형제 요소에 적용됨

속성 선택자

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

<style>
    a[href] {
      background: yellow;
    }
</style>
  • <a> 태그 중 href라는 속성이 있는 요소를 찾아내 배경색 지정

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

<style>
    a[target="_blank"] {
      background: yellow;
    }
</style>
  • target 속성의 값이 _blank인 링크를 찾아 배경색 지정

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

<style>
    a[class ~= "button"] {
      border: 2px solid black;
    }
</style>
  • class 속성에서 "button"이라는 값이 포함된 요소의 스타일 정의함
  • class="button"처럼 값이 정확히 일치하거나 class="flat button"처럼 두 개 이상의 속성 값중에 "button" 값이 포함되어 있을 때 적용됨
  • 이때 선택된 값은 일부만 일치하는 것이 아니라 한 단어로 일치해야 함
  • 예를 들어 class="flat-button"처럼 하이픈으로 연결되어 있거나 class="buttons"처럼 요소의 값이 일부만 일치할 때는 적용되지 않음

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

<style>
    a[title |= "us"] {
      border: 2px solid black;
    }
</style>
  • 속성 값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자
  • [속성~=값] 선택자는 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않음
  • [속성|=값] 선택자는 하이픈(-)으로 연결한 단어가 있더라도 스타일을 적용

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

<style>
    a[title ^= "eng"] {
      border: 2px solid black;
    }
</style>
  • {속성=값} 선택자에 '캐럿(^)'이 붙으면 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용함

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

<style>
    a[href $= "hwp"] {
      background: url(images/hwp_icon.gif) center right no-repeat;
    }
</style>
  • 지정한 값으로 끝나는 요소를 찾아 스타일을 적용함
  • href에 링크된 파일의 확장자, 즉 파일 이름의 마지막 값을 체크하면 그 파일에 맞는 아이콘을 파일 이름 옆에 표시할 수 있음

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

<style>
    [href *= "w3"] {
      background: blue;
    }
</style>
  • href 속성에 w3라는 값이 포함되면 스타일 적용
기본형 스타일 적용 경우 예시 - 선택자 예시 - 적용되는 요소
[속성] 지정한 '속성'일 때 [href] <a href="#">메뉴 1</a>
[속성 = 값] '값'에 일치할 때 [target = "_blank"] <a href="......" target="_blank">html</a>
[속성 ~= 값] 여러 값들 중 특정 '값'이 포함되어 있을 때 (단어별) [class ~= "button"] <a href="#" class="flat button">메뉴4</a>
[속성 |= 값] '값'이 포함되어 있을 때
(하이픈 포함 단어별)		 [class |= "us"] <a href="#" title="us">영어</a>
<a href="#" title="us-english">영어</a>
[속성 ^= 값] '값'으로 시작할 때 [title ^= "eng"] <a href="#" title="english">영어</a>
[속성 $= 값] '값'으로 끝날 때 [href $= "xls"] <a href="intro.xls">엑셀 파일</a>
[속성 *= 값] '값'이 속성 값의 일부일 때 [href *= "w3"] <a href="http://www.w3c.org/TR/html">HTML 사이트</a>

 

저작자표시