[attribute~="value"]

 

속성이 특정 값을 가진 요소를 선택합니다. 하나의 단어로 정확히

일치해야 하고, 특정 값 이외의 속성값을 가져도 선택됩니다.

title 속성의 값이 asd를 포함한 p 요소를 선택하려면 다음과 같이 합니다.

p[title~="asd"]

다음은 이를 이용한 예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Attribute Selector</title>
    <style>
      p[title~="asd"] {color: red;}
    </style>
  </head>
  <body>
    <p title="asd">Lorem ipsum dolor sit amet.</p>
    <p title="asd zxc">Aenean nec mollis nulla.</p>
    <p title="asdz">Phasellus lacinia tempus mauris eu laoreet.</p>
    <p>Proin gravida velit dictum dui consequat.</p>
  </body>
</html>

두번째 문장은 asd 이외에 zxc가 있지만 선택됩니다. 세번째 문장은

asd라는 문자열은 포함하고 있지만 하나의 단어가 아니기때문에 선택되지 않습니다.

댓글을 달아 주세요

Posted by 발 빠른 너구리 Fast-Racoon

▲ TOP ▲