Attribute

Attribute Selectors

특정한 속성이 있는 요소를 선택하기

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

/*[타겟]속성이 있는 a태그 잡기*/

속성에 특정한 값이 있는 정의목록(요소)을 선택

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

속성에 특정한 값에 단독으로 포함된 정의목록(요소)을 선택

단독으로

[title~="flower"] {
  border: 5px solid yellow;
}
/*flower라는 값이 있으면 선택*/

속성에 특정한 값을 단독으로 시작하는 정의목록(요소)을 선택

시작으로

[class|="top"] {
  background: yellow;
}
/*top라는 값으로 시작하면 선택, top or top- */

속성에 특정한 값으로 시작되는 정의목록(요소)을 선택

시작만

[class^="top"] {
  background: yellow;
}
/*top이라고 시작만 하면 모두 선택 (뭐가 붙어있든간 상관없이)*/

속성이 특정한 값으로 끝나는 정의목록(요소)을 선택

끝만

[class$="test"] {
  background: yellow;
}
/*test라고 끝나기만 하면 모두 선택 (뭐가 붙어있든간 상관없이)*/

속성이 특정한 값을 포함하는 정의목록(요소)을 선택

있다면

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