[attribute|="value"]

 

속성값이 특정 단어와 일치하거나 특정 단어 뒤에 바로 -가 있는 요소를 선택합니다.

title 속성의 값이 asd이거나 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="asd-z">Phasellus lacinia tempus mauris eu laoreet.</p>
    <p title="asd-z xc">Proin gravida velit dictum dui consequat.</p>
  </body>
</html>

첫번째 문장은 title의 속성값이 정확히 asd이므로 선택됩니다. 하지만

두번째 문장은 asd 뒤에 빈 칸이 있고 다른 값이 있으므로 선택되지 않습니다.

세번째와 네번째 문장은 asd 이외의 문자가 있지만 -로 연결되어 있으므로 선택됩니다.

댓글을 달아 주세요

Posted by 발 빠른 너구리 Fast-Racoon

▲ TOP ▲