특정 속성 또는 속성 값이 있는 HTML 요소의 스타일을 지정할 수 있습니다.

[attribute] 셀렉터는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.

하기 예제는 대상 속성이 있는 모든 <a> 요소를 선택합니다.

CSS [attribute] Selector

The links with a target attribute gets a yellow backround:

w3schools.com disney.com wikipedia.org

[attribute = "value"] 셀렉터는 지정된 속성 및 값이 있는 요소를 선택하는 데 사용됩니다.

하기 예제는 target="_ blank" 속성이 있는 모든 <a> 요소를 선택합니다.

CSS [attribute] Selector

The links with target="_blank" gets a yellow backround:

w3schools.com disney.com wikipedia.org

[attribute ~ = "value"] 셀렉터는 지정된 단어를 포함하는 속성 값이 있는 요소를 선택하는 데 사용됩니다.

하기 예제는 공백으로 구분된 단어 목록을 포함하는 title 속성을 가진 모든 요소를 선택하며, 여기에서는 “flower”입니다.

CSS [attribute~="value"] Selector

All images with the title attribute containing the word "flower" get a yellow border.

위의 예제는 title = “flower”, title = “summer flower” 및 title = “flower new”를 가진 요소들과 일치하지만, title = “my-flower” 또는 title = “flowers”를 가진 요소들과는 일치하지 않습니다.

[attribute | = "value"] 셀렉터는 지정된 값으로 시작하는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.

다음 예제는 “top”으로 시작하는 클래스 속성 값을 가진 모든 요소를 선택합니다.

Note: 값(value)은 class = “top”과 같이 단독으로 또는 class = “top-text”처럼 뒤에 하이픈 (-)으로 연결되는 완전한 단어이어야 합니다.

CSS [attribute|="value"] Selector

Welcome

Hello World!

Are you learning CSS?

[attribute * = "value"] 셀렉터는 속성 값이 지정된 값을 포함하는 요소를 선택하는 데 사용됩니다.

하기 예제는 “te”를 포함하는 클래스 속성 값을 가진 모든 요소를 선택합니다.

Note: 값(value)은 전체 단어일 필요는 없습니다!

CSS [attribute*="value"] Selector

This is a some text in a paragraph.

속성 선택자(attribute selector)는 클래스(class) 또는 아이디(ID) 없이 양식에 스타일을 설정하는 것에 유용할 수 있습니다.

Styling Forms

Firstname: lastname: