:any-link
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´1æâ©.
:any-link 㯠CSS ã®æ¬ä¼¼ã¯ã©ã¹ã»ã¬ã¯ã¿ã¼ã§ã訪åã®æç¡ã¨ã¯ç¬ç«ããã½ã¼ã¹ã¢ã³ã«ã¼ã¨ãã¦æ¯ãèãè¦ç´ ã表ãã¾ããè¨ãæããã°ã href å±æ§ãæã¤ãã¹ã¦ã® <a> ã¾ã㯠<area> è¦ç´ ãé¸æãã¾ããã¤ã¾ãã :link ã¾ã㯠:visited ã«ä¸è´ãããã¹ã¦ã®è¦ç´ ãé¸æãã¾ãã
試ãã¦ã¿ã¾ããã
p {
font-weight: bold;
}
a:any-link {
color: forestgreen;
text-decoration-color: hotpink;
}
<p>訪åæ¸ã¿ã®å¯è½æ§ã®ãããã¼ã¸:</p>
<ul>
<li>
<a href="https://developer.mozilla.org">MDN Web Docs</a>
</li>
<li>
<a href="https://www.youtube.com/YouTube">Google</a>
</li>
</ul>
<p>å±¥æ´ã«ãªãå¯è½æ§ãé«ããã¼ã¸:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/missing-3">ã©ã³ãã MDN ãã¼ã¸</a>
</li>
<li>
<a href="https://example.com/missing-3">ã©ã³ãã Example ãã¼ã¸</a>
</li>
</ul>
æ§æ
css
:any-link {
/* ... */
}
ä¾
HTML
html
<a href="https://example.com">å¤é¨ãªã³ã¯</a><br />
<a href="#">å
é¨ã¿ã¼ã²ãããªã³ã¯</a><br />
<a>ãã¬ã¼ã¹ãã«ãã¼ãªã³ã¯ï¼ã¹ã¿ã¤ã«ã¯é©ç¨ããã¾ããï¼</a>
CSS
css
a:any-link {
border: 1px solid blue;
color: orange;
}
/* WebKit ãã©ã¦ã¶ã¼åã */
a:-webkit-any-link {
border: 1px solid blue;
color: orange;
}
çµæ
ä»æ§æ¸
| Specification |
|---|
| Selectors Level 4 # the-any-link-pseudo |