[attribute]
특정 attribute를 선택하기 위해 사용하는 선택자이다.
1
2
3
| a[target] {
background-color: yellow;
}
|
- a 태그의 target attribute가 선언된 요소를 선택한다.
1
2
3
| a[target="_blank"] {
background-color: yellow;
}
|
- attribute 값에 해당하는 요소를 선택한다.
정확히 특정 단어 포함하는 attribute 선택
1
2
3
| [title~="flower"] {
border: 5px solid yellow;
}
|
1
2
3
4
5
6
7
8
9
| <h2>CSS [attribute~="value"] Selector</h2>
<p>
All images with the title attribute containing the word "flower" get a yellow
border.
</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113" />
<img src="img_flwr.gif" title="flower f" width="224" height="162" />
<img src="img_tree.gif" title="tree" width="200" height="358" />
|
- title 속성에 “flower” 단어가 포함된 요소를 선택한다.
띄어쓰기로 구분된 요소는 개별요소로 취급하짐나, 하이푼(-)으로 구분된 요소는 여기서 제외된다.
특정 단어를 포함하는 attribute 선택
1
2
3
| [class|="top"] {
background: yellow;
}
|
1
2
3
4
5
| <h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
|
- top이라는 단어가 포함된 요소만 선택하는 것을 확인할 수 있다. (-으로 구분할 수 있다.)
특정 단어로 시작하는 attribute 속성 선택
1
2
3
| [class^="top"] {
background: yellow;
}
|
1
2
3
4
5
| <h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
|
특정 단어로 끝나는 attribute 속성 선택
1
2
3
| [class$="test"] {
background: yellow;
}
|
특정 값을 포함하는 attribute 속성을 선택
1
2
3
| [class*="te"] {
background: yellow;
}
|
댓글 공유