CSS - 속성 선택자(Selector) 7가지 사용방법

CSS 속성 선택자는 HTML 요소의 특정 속성이나 속성 값을 기준으로 스타일을 적용할 수 있는 강력한 도구입니다

 

CSS 속성 선택자 7가지 사용방법

CSS 속성 선택자 7가지 사용방법

 

1. 속성 이름 선택자 [attribute]

2. 속성 값 선택자 [attribute="value"]

3. 속성 값 항목 선택자 [attribute~="value"]

4. 속성 첫 단어 선택자 [attribute|="value"]

5. 속성 부분 문자열 선택자 [attribute="value"]

6. 속성 첫 부분 문자열 선택자 [attribute^="value"]

7. 속성 마지막 부분 문자열 선택자 [attribute$="value"]

 

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

속성 이름 선택자 [attribute]

<!-- 모든 'title' 속성을 가진 요소에 스타일 적용 -->
<style>
  [title] {
    border: 2px solid blue;
  }
</style>

<p title="info">이 문단은 title 속성을 가지고 있습니다.</p>
<p>이 문단은 title 속성이 없습니다.</p>

• 속성 이름 선택자 [attribute] : 특정 속성을 가진 모든 요소를 선택합니다. 예를 들어 [title]은 title 속성이 있는 모든 요소에 스타일을 적용합니다. 이 선택자는 속성의 값과 상관없이 속성의 존재 여부만 확인합니다.

 

속성 값 선택자 [attribute="value"]

<!-- 'type' 속성이 'submit'인 버튼에 스타일 적용 -->
<style>
  [type="submit"] {
    background-color: green;
    color: white;
  }
</style>

<button type="submit">제출</button>
<button type="reset">초기화</button>

• 속성 값 선택자 [attribute="value"] : 특정 속성이 정확히 지정된 값을 가진 요소를 선택합니다. 예를 들어 [type="submit"]은 type 속성이 "submit"인 요소만 선택합니다. 이 선택자는 정확한 값 일치를 요구합니다.

 

속성 값 항목 선택자 [attribute~="value"]

<!-- 'class' 속성에 'highlight'가 포함된 요소에 스타일 적용 -->
<style>
  [class~="highlight"] {
    background-color: yellow;
  }
</style>

<p class="highlight important">이 문단은 highlight 클래스를 가지고 있습니다.</p>
<p class="important">이 문단은 highlight 클래스가 없습니다.</p>

• 속성 값 항목 선택자 [attribute~="value"] : 속성 값이 공백으로 구분된 여러 값 중 하나와 일치하는 요소를 선택합니다. 예를 들어 [class~="highlight"]는 class 속성에 "highlight"가 포함된 요소를 선택합니다.

 

속성 첫 단어 선택자 [attribute|="value"]

<!-- 'lang' 속성이 'en'으로 시작하는 요소에 스타일 적용 -->
<style>
  [lang|="en"] {
    font-style: italic;
  }
</style>

<p lang="en-US">This paragraph is in US English.</p>
<p lang="fr">Ce paragraphe est en français.</p>

• 속성 첫 단어 선택자 [attribute|="value"] : 속성 값이 지정된 값으로 시작하거나 그 값과 하이픈(-)으로 연결된 요소를 선택합니다. 예를 들어 [lang|="en"]은 lang 속성이 "en" 또는 "en-US"와 같은 값으로 시작하는 요소를 선택합니다.

 

속성 부분 문자열 선택자 [attribute="value"]

<!-- 'src' 속성에 'logo'가 포함된 이미지에 스타일 적용 -->
<style>
  [src*="logo"] {
    border: 3px solid orange;
  }
</style>

<img src="company-logo.png" alt="Logo">
<img src="banner.jpg" alt="Banner">

• 속성 부분 문자열 선택자 [attribute="value"] : 속성 값에 지정된 부분 문자열이 포함된 요소를 선택합니다. 예를 들어 [src*="logo"]는 src 속성에 "logo"가 포함된 모든 요소를 선택합니다.

 

속성 첫 부분 문자열 선택자 [attribute^="value"]

<!-- 'href' 속성이 'https://'로 시작하는 링크에 스타일 적용 -->
<style>
  [href^="https://"] {
    color: green;
  }
</style>

<a href="https://example.com">보안 연결</a>
<a href="http://example.com">일반 연결</a>

• 속성 첫 부분 문자열 선택자 [attribute^="value"] : 속성 값이 지정된 값으로 시작하는 요소를 선택합니다. 예를 들어 [href^="https://"]는 href 속성이 "https://"로 시작하는 모든 링크를 선택합니다.

 

속성 마지막 부분 문자열 선택자 [attribute$="value"]

<!-- 'src' 속성이 '.jpg'로 끝나는 이미지에 스타일 적용 -->
<style>
  [src$=".jpg"] {
    border: 2px dashed red;
  }
</style>

<img src="photo.jpg" alt="Photo">
<img src="image.png" alt="Image">

• 속성 마지막 부분 문자열 선택자 [attribute$="value"] : 속성 값이 지정된 값으로 끝나는 요소를 선택합니다. 예를 들어 [src$=".jpg"]는 src 속성이 ".jpg"로 끝나는 모든 이미지를 선택합니다.