CSS3 특성 선택자(Selector)

특성 선택자란? 

주어진 특성의 존재 여부나 그 값에 따라 요소를 선택하는 것

<!-- html -->

<ul>
    <li><a title="hello" href="#">title link</a></li>
    <li><a className="hellologo" href="#internal">Internal link</a></li>
    <li><a href="https://example.com">https://example.com</a></li>
    <li><a href="#InSensitive">Insensitive internal link</a></li>
    <li><a href="http://example.org">http://example.org</a></li>
</ul>

/* css */

/* <a> elements with a title attribute */
a[title] {
  color: red;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.com"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

 

[실행결과]