CSS 선택자 - 속성 선택자

 

 

 

속성 선택자

   - 태그 이름 외에 추가적인 정보를 전달할 때 사용되는 선택자

   - 속성, 특성을 표시하는데 사용합니다.

/* css */

a{
    display: block;
}

/* attr */
a[target]{
    color: pink;
    display: block;
}

/* attr=value */
a[target="_blank"]{
    color: red;
    display: block;
}

/* attr^=value */
a[href^="https"]{
	font-size: 30px;
    margin-left: 30px;
}

/* attr$=value */
a[href$=".net"]{
	background-color: yellow;
}

/* attr_=value */
a[href_="daum"]{
	color=sienna;
}

/* html */
<div id="attr_selector">
      <a href="http://www.naver.com" target="_self">attr </a>
      <a href="http://www.naver.com" target="_blank">attr = value </a>
      <a href="https://www.naver.com"> attr^=value </a>
      <a href="http://www.naver.net"> attr$=value </a>
      <a href="https://www.naver.net" target="_blank">
        attr=value & attr^=value & attr$=value</a
      >
      <a href="http://www.daum.com"> attr*=value </a>
      <a href="http://www.naver.com"> 일반 a 태그 </a>
</div>

실행 결과

속성 선택자 [attr] 

a[target]{
    color: pink;
    display: block;
}

   > 태그뒤에 속성을 추가하여 해당 속성을 가진 태그만 스타일을 적용할 수 있다

 

속성 선택자 [attr = value]

a[target="_blank"]{
    color: pink;
    display: block;
}

   > 해당 속성에 해당값을 가진 태그만 스타일을 적용한다.

 

속성 선택자 [attr^ = value]

a[href^="https"]{
	font-size: 30px;
    margin-left: 30px;
}

   > 해당 속성에 해당 값으로 시작하는 문자열을 가진 태그만 스타일을 적용한다.

 

속성 선택자 [attr$ = value]

a[href$=".net"]{
	background-color: yellow;
}

   > 해당 속성에 해당 값으로 끝나는 문자열을 가진 태그만 스타일을 적용한다.

 

속성 선택자 [attr* = value]

a[href_="daum"]{
	color=sienna;
}

   > 해당 속성에 해당 값이 포함된 문자열을 가진 태그만 스타일을 적용한다.

 

 

해당 선택자를 활용하여 특정 속성이 들어간 태그, 특정 값을 가진 속성이 있는 태그만 따로 적용할 수 있습니다.