From e61ed5b0cde3caad6591d643fa176eb192ba2f0f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 20:20:52 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_link/index.md | 125 ++++++++++++---------------------- 1 file changed, 45 insertions(+), 80 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/_colon_link/index.md b/files/ja/web/css/_colon_link/index.md index 99b6057169..f696004ed1 100644 --- a/files/ja/web/css/_colon_link/index.md +++ b/files/ja/web/css/_colon_link/index.md @@ -1,103 +1,68 @@ --- title: ':link' -slug: 'Web/CSS/:link' +slug: Web/CSS/:link tags: - CSS - - CSS Reference - - Pseudo-class - - Reference - - 疑似クラス -translation_of: 'Web/CSS/:link' + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.link +translation_of: Web/CSS/:link --- -
{{CSSRef}}
+{{ CSSRef }} -

CSS の :link 疑似クラスは、まだ訪問されていない要素を表します。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} など、 href 属性を持つ未訪問のすべての要素を選択します。

+**`:link`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、まだ訪問されていない要素を表します。 {{HTMLElement("a")}} または {{HTMLElement("area")}} など、 `href` 属性を持つ未訪問のすべての要素を選択します。 -
/* 未訪問の <a> をすべて選択します */
+```css
+/* 未訪問の  をすべて選択します */
 a:link {
   color: red;
-}
+} +``` -

:link 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":active")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :link — :visited — :hover — :active で定義されるように、他のすべてのリンク関連規則の前に :link 規則を置いてください。

+`:link` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス （{{cssxref(":active")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるように、他のすべてのリンク関連規則の前に `:link` 規則を置いてください。 -
-

メモ: 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。

-
+> **Note:** 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。 -

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

既定では、大半のブラウザーが訪問済みのリンクに特殊な {{cssxref("color")}} の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 {{cssxref("background-color")}} の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

+既定では、大半のブラウザーが訪問済みのリンクに特別な {{cssxref("color")}} の値を適用しています。そのため、この例のリンクは訪問前でしか特別な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があります）。しかし、 {{cssxref("background-color")}} の値は、大半のブラウザーが既定で訪問済みのリンクに設定していないのでおそらく残ります。 -

HTML

+### HTML -
<a href="#ordinary-target">これは普通のリンクです。</a><br>
-<a href="">このリンクを訪問しました。</a><br>
-<a>リンクのプレイスホルダー（スタイルの適用なし）</a>
-
+```html +これは普通のリンクです。
+このリンクを訪問しました。
+リンクのプレイスホルダー（スタイルの適用なし） +``` -

CSS

+### CSS -
a:link {
+```css
+a:link {
   background-color: gold;
   color: green;
 }
-
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}変更なし。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}初回定義。
- -

ブラウザー実装状況

- -
-

{{Compat("css.selectors.link")}}

-
- -

関連情報

- - +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- リンク関連の擬似クラス: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }} -- cgit v1.2.3-54-g00ecf