CSS 속성 선택기
특정 속성으로 HTML 요소 스타일 지정
특정 속성 또는 속성 값이 있는 HTML 요소의 스타일을 지정할 수 있습니다.
CSS [속성] 선택기
[attribute]선택자는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다 .
다음 예에서는 대상 속성이 있는 모든 <a> 요소를 선택합니다.
예시
a[target] {
background-color: yellow;
}
CSS [속성="값"] 선택기
[attribute="value"]선택자는 지정된 속성과 값을 가진 요소를 선택하는 데 사용됩니다 .
다음 예에서는 target="_blank" 속성이 있는 모든 <a> 요소를 선택합니다.
예시
a[target="_blank"] {
background-color: yellow;
}
CSS [속성~="값"] 선택기
[attribute~="value"]선택기는 지정된 단어를 포함하는 속성 값을 가진 요소를 선택하는 데 사용됩니다 .
다음 예는 공백으로 구분된 단어 목록(그 중 하나는 "꽃")을 포함하는 제목 속성이 있는 모든 요소를 선택합니다.
예시
[title~="flower"] {
border: 5px solid yellow;
}
위의 예는 title="flower", title="summer flower" 및 title="flower new"가 있는 요소와 일치하지만 title="my-flower" 또는 title="flowers"는 일치하지 않습니다.
CSS [속성|="값"] 선택기
선택기는 지정된 속성이 있는 요소를 선택 하는 [attribute|="value"]데 사용되며, 그 값은 정확히 지정된 값이거나 지정된 값 뒤에 하이픈(-)이 올 수 있습니다.
참고: 값은 class="top"과 같이 단독으로 사용되거나 class="top-text"와 같이 하이픈( - )이 뒤에 오는 전체 단어여야 합니다.
예시
[class|="top"] {
background: yellow;
}
CSS [속성^="값"] 선택기
[attribute^="value"]선택기는 값이 지정된 값으로 시작하는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다 .
다음 예제는 "top"으로 시작하는 클래스 속성 값을 가진 모든 요소를 선택합니다.
참고: 값이 전체 단어일 필요는 없습니다!
예시
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] 선택기
[attribute$="value"]선택자는 속성 값이 지정된 값으로 끝나는 요소를 선택하는 데 사용됩니다 .
다음 예는 "test"로 끝나는 클래스 속성 값을 가진 모든 요소를 선택합니다.
참고: 값이 전체 단어일 필요는 없습니다!
예시
[class$="test"] {
background: yellow;
}
CSS [속성*="값"] 선택기
[attribute*="value"]선택기는 속성 값에 지정된 값이 포함된 요소를 선택하는 데 사용됩니다 .
다음 예제에서는 "te"가 포함된 클래스 속성 값을 가진 모든 요소를 선택합니다.
참고: 값이 전체 단어일 필요는 없습니다!
예시
[class*="te"] {
background: yellow;
}
스타일링 양식
속성 선택자는 클래스나 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 속성 선택기
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |