[selector] CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/속성값) 갖는 선택자

목차

1. [attribute=value] 예제 - 속성값이 value인 attribute 속성 갖는 선택자
2. [attribute=value] 정의
3. [attribute=value] 구문
4. [attribute=value] 예제 - text 타입 input 요소 선택

[attribute=value] 예제 - 속성값이 value인 attribute 속성 갖는 선택자

 

<style>

a[target="_blank"] {

  background-color: yellow;

}

</style>

<a href="https://hommzzang.com">홈짱닷컴</a><br>

<a href="https://yamette.com" target="_blank">야메떼닷컴</a><br>

<a href="https://sir.kr" target="_blank">그누보드</a>

결과보기

[attribute=value] 정의

 

속성값이 value인 attribute 속성을 갖는 선택자 의미.

(= 즉, 특정 속성과 속성값을 갖는 요소를 선택.)

 

---

PS.

• CSS버전: CSS2
• IE7 이상 주요 최신 브라우저 모두 지원.

 

[attribute=value] 구문

 

selector [attribute = value] {

  ...

}

---

PS. 

• selector : 탐색 범위에 해당하는 선택자 (※ 없으면, 모든 요소 탐색)
• attribute : 속성명
• value : 속성값

  

[attribute=value] 예제 - text 타입 input 요소 선택

 

<style>

input[type="text"] {

  width: 150px;

  -webkit-transition: width .40s ease-in-out;

  transition: width .40s ease-in-out;

}

input[type="text"]:focus {

  width: 250px;

}

</style>

검색어 입력: <input type="text" name="search"> <input type="submit" value="확인">

 

결과보기