[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>

include value

  • 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>

startwith

특정 단어로 끝나는 attribute 속성 선택

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

특정 값을 포함하는 attribute 속성을 선택

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