51.疑似クラスって何？③　～位置擬似クラス～

本日は位置疑似クラスについて。

では早速やっていきましょう。

主にリンク（href属性）と、hrefで設定された要素に対して様々なスタイルを適用できるクラスです。

参考ページのリンクは下記に

位置疑似クラスっていうよりは、「所在」疑似クラスという方がわかりやすい気がします。href属性がそもそも、資源の所在(ソースのありか)を表していますよね。

この疑似クラスには

があります。

どれも使ったことないですね。

:link

この疑似クラスは、セレクタで指定した要素に、href属性が指定されていて、リンク先を訪れていない場合にスタイルが適用されます。

リンクがついている文字のタップやクリックの前後で文字色が変わる、あれですね。

こちらは:linkの反対で、セレクタで指定した要素に、href属性が指定されていて、すでに訪れたことがある場合にスタイルが適用されます。

:linkと:visitedは指定したことはないけれど、身近な内容でした。

:any-link

これは:linkと:visitedの和集合的な感じです。

セレクタで指定した要素に、href属性が指定されている場合にスタイルが適用されます。

:target

この疑似クラスはセレクタで指定した要素に、href属性が設定されていて、その中身が#idの形で記載されている場合に、そのリンク先である#idが設定されている要素に対してスタイルが適用されます。

:local-link

:target-within

:scope

これらはいろいろ試してみましたが正直わかりませんでした。

調べてみてもこれという情報が得られず…。

対応しているブラウザだったり、実装の問題だったりがあるようです。

本日は位置疑似クラスについてやってきました。

デイトラの学習は進んではいますが、モヤっとしています。

直近のコーディング練習を自分のモノにできていない感があって…

なので、コーディン進め方・流れ、所々で起こる「何故そうするのか」を整理したいとおもいます。

では、また。

web制作のしおり