CSSのセレクタでhrefのURLを指定する方法【前方一致・後方一致】

aタグにおいてhref属性にはURLを指定します。各aタグごとに違う情報が記述されているんだから、いちいちclassを指定しなくてもいいのでは？と思ったことかと思います。

その通りです。

CSSのセレクタでhrefのURLを指定する方法を説明します。

結論

属性セレクタを使いましょう。

属性セレクタを使うとそのタグの属性と値に対してCSSを指定できるようになります。

記号を変えると意味が変わるので詳しく解説します。

完全一致　a[href="URL"]

href属性の値が指定したURLに完全一致しているときに使うセレクタです。

利用例として特定の1つのURLのaタグを指定したい場合に使えます。

例）URLが「https://csshtml.work/files/gaiyou.pdf」のaタグへ指定

（赤文字が指定の効いているaタグです。）

<style>
    /*↓コレ↓*/
    .example1 a[href="https://csshtml.work/files/gaiyou.pdf"]{
        color: red;
    }
    
    .example1 a{
        display: block;
        border: 1px solid #333;
        background:#f2f2f2;
        margin: 10px;
        padding: 5px;
    }    
</style>

<div class="example1">
    <a href="https://csshtml.work/files/gaiyou.pdf">
        https://csshtml.work/files/gaiyou.pdf</a>
    <a href="http://csshtml.work/files/gaiyou.pdf">
        http://csshtml.work/files/gaiyou.pdf</a>
    <a href="https://csshtml.work/files/gaiyou.doc">
        https://csshtml.work/files/gaiyou.doc</a>
    <a href="https://google.com/">
        https://google.com/</a>
</div>

このように特定のURLに完全一致しているaタグのみにCSSを指定できます。

前方一致　a[href^="URL"]

href属性の値が指定したURLと前方一致しているときに使うセレクタです。

利用例としてhttpsを含めたドメインが一致するaタグを指定したい場合に使えます。

例）URLの前方が「https://csshtml.work」のaタグへ指定

<style>
    /*↓コレ↓*/
    .example2 a[href^="https://csshtml.work"]{
        color: red;
    }
    
    .example2 a{
        display: block;
        border: 1px solid #333;
        background:#f2f2f2;
        margin: 10px;
        padding: 5px;
    }    
</style>

<div class="example2">
    <a href="https://csshtml.work/files/gaiyou.pdf">
        https://csshtml.work/files/gaiyou.pdf</a>
    <a href="http://csshtml.work/files/gaiyou.pdf">
        http://csshtml.work/files/gaiyou.pdf</a>
    <a href="https://csshtml.work/files/gaiyou.doc">
        https://csshtml.work/files/gaiyou.doc</a>
    <a href="https://google.com/">
        https://google.com/</a>
</div>

ドメインを含まず「http」のみに指定することでhttpへのリンクを見つけ出すことにも使えますね。（使わないとは思いますが…）

部分一致　a[href*="URL"]

href属性の値が指定したURLと部分一致している（含まれている）ときに使うセレクタです。

利用例として特定のドメインやディレクトリを含むaタグを指定したい場合に使えます。

例）URLに「csshtml.work/files/」を含むaタグへ指定

<style>
    /*↓コレ↓*/
    .example3 a[href*="csshtml.work/files/"]{
        color: red;
    }
    
    .example3 a{
        display: block;
        border: 1px solid #333;
        background:#f2f2f2;
        margin: 10px;
        padding: 5px;
    }    
</style>

<div class="example3">
    <a href="https://csshtml.work/files/gaiyou.pdf">
        https://csshtml.work/files/gaiyou.pdf</a>
    <a href="http://csshtml.work/files/gaiyou.pdf">
        http://csshtml.work/files/gaiyou.pdf</a>
    <a href="https://csshtml.work/files/gaiyou.doc">
        https://csshtml.work/files/gaiyou.doc</a>
    <a href="https://google.com/">
        https://google.com/</a>
</div>

https・httpに関わらずドメインを指定したいときに便利です。

また特定のディレクトリ（フォルダ）に属するURLに指定したいときにも便利です。ただし、親のディレクトリが違う同名の別ディレクトリということもあるため気を付けましょう。

後方一致　a[href$="URL"]

href属性の値が指定したURLと後方一致しているときに使うセレクタです。

利用例として特定の拡張子のaタグを指定したい場合に使えます。

例）URLの拡張子が「pdf」のaタグへ指定

<style>
    /*↓コレ↓*/
    .example4 a[href$=".pdf"]{
        color: red;
    }
    
    .example4 a{
        display: block;
        border: 1px solid #333;
        background:#f2f2f2;
        margin: 10px;
        padding: 5px;
    }    
</style>

<div class="example4">
    <a href="https://csshtml.work/files/gaiyou.pdf">
        https://csshtml.work/files/gaiyou.pdf</a>
    <a href="http://csshtml.work/files/gaiyou.pdf">
        http://csshtml.work/files/gaiyou.pdf</a>
    <a href="https://csshtml.work/files/gaiyou.doc">
        https://csshtml.work/files/gaiyou.doc</a>
    <a href="https://google.com/">
        https://google.com/</a>
</div>

最もよく使う型だと思います。

拡張子で判別できるのでPDFアイコン、Wordアイコンを自動でつけるといったこともできます。

aタグ以外でも利用可能

URLを使うのはaタグ以外にiframeに使うこともあります。もちろんiframeにも同じような指定ができます。

たとえば、googlemapのiframeだけ特定の指定をしたい。というときにも活用できます。

属性セレクタはhref以外の属性にも使えます。

CSSセレクタについてもっと知りたいならこちら↓

まとめ

CSSのセレクタで特定のURLを持つ要素に指定するには属性セレクタを使いましょう。

以上、CSSのセレクタでhrefのURLを指定する方法でした。