CSS 속성 선택자

특정 속성을 가진 HTML 요소에 스타일을 설정

특정 속성이나 속성 값을 가진 HTML 요소의 스타일을 설정할 수 있습니다.

CSS [attribute] 선택자

[attribute] 선택자는 특정 속성을 가진 요소를 선택합니다.

아래 예제는 target 속성을 가진 모든 <a> 요소를 선택합니다;

예제

a[target] {
  background-color: yellow;
}

본인이 직접 시도해보세요

CSS [attribute="value"] 선택자

[attribute="value"] 선택자는 특정 속성과 값을 가진 요소를 선택합니다.

아래 예제는 target="_blank" 속성을 가진 모든 <a> 요소를 선택합니다:

예제

a[target="_blank"] { 
  background-color: yellow;
}

본인이 직접 시도해보세요

CSS [attribute~="value"] 선택자

[attribute~="value"] 선택자는 속성 값이 지정된 단어를 포함하는 요소를 선택합니다.

아래 예제는 title 속성이 "flower" 단어를 포함하는 모든 요소를 선택합니다:

예제

[title~="flower"] {
  border: 5px solid yellow;
}

본인이 직접 시도해보세요

위의 예제는 다음 속성의 요소를 일치시킵니다: title="flower"、title="summer flower" 및 title="flower new"، 하지만 title="my-flower" 또는 title="flowers"는 일치하지 않습니다.

CSS [attribute|="value"] 선택자

[attribute|="value"] 선택자는 특정 속성이 지정된 값으로 시작하는 요소를 선택합니다.

다음 예제에서 class 속성이 "top"으로 시작하는 모든 요소를 선택합니다:

주석:값은 완전한 단어나 단독의 단어여야 합니다. 예를 들어 class="top" 또는 대시(-)를 따르는 것, 예를 들어 class="top-text".

예제

[class|="top"] {
  background: yellow;
}

본인이 직접 시도해보세요

CSS [attribute^="value"] 선택자

[attribute^="value"] 선택자는 특정 값으로 시작하는 속성을 선택합니다.

다음 예제에서 class 속성이 "top"으로 시작하는 모든 요소를 선택합니다:

힌트:값은 완전한 단어가 아니어도 됩니다!

예제

[class^="top"] {
  background: yellow;
}

본인이 직접 시도해보세요

CSS [attribute$="value"] 선택자

[attribute$="value"] 선택자는 특정 값으로 끝나는 속성을 선택합니다.

다음 예제에서 class 속성이 "test"로 끝나는 모든 요소를 선택합니다:

힌트:값은 완전한 단어가 아니어도 됩니다!

예제

[class$="test"] {
  background: yellow;
}

본인이 직접 시도해보세요

CSS [attribute*="value"] 선택자

[attribute*="value"] 선택자는 특정 단어를 포함하는 속성 값을 선택합니다.

다음 예제에서 class 속성에 "te"를 포함하는 모든 요소를 선택합니다:

힌트:값은 완전한 단어가 아니어도 됩니다!

예제

[class*="te"] {
  background: yellow;
}

본인이 직접 시도해보세요

폼 스타일 설정

class나 id가 없는 폼에 스타일을 설정하려면 속성 선택자가 매우 유용합니다:

예제

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

본인이 직접 시도해보세요

힌트:우리의 사이트를 방문하세요. CSS 폼 튜토리얼CSS 폼 스타일링에 대해 더 알아보려면 다음을 참조하세요.

모든 CSS 속성 선택자

선택자 예제 예제 설명
[attribute] [target] target 속성을 가진 모든 요소를 선택합니다.
[attribute=value] [target=_blank] target="_blank" 속성을 가진 모든 요소를 선택합니다.
[attribute~=value] [title~=flower] title 속성에 "flower" 단어를 포함하는 모든 요소를 선택합니다.
[attribute|=value] [lang|=en] lang 속성이 "en"로 시작하는 모든 요소를 선택합니다.
[attribute^=value] a[href^="https"] href 속성 값이 "https"로 시작하는 각 <a> 요소를 선택합니다.
[attribute$=value] a[href$=".pdf"] href 속성 값이 ".pdf"로 끝나는 각 <a> 요소를 선택합니다.
[attribute*=value] a[href*="codew3c"] href 속성 값에 "codew3c" 서브스트링이 포함된 각 <a> 요소를 선택합니다。

확장 독서

보조서:CSS 속성 선택자 상세 설명