• HOME > 
  • CSS > 
  • CSSのセレクターで前方一致や部分一致を使って指定する方法

CSSのセレクターで前方一致や部分一致を使って指定する方法

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

CSSにおける前方一致や部分一致の指定の仕方

連番のIDを付与した要素などにCSSでスタイルを設定するとき、今までは別途クラスを付与して処理していたのですが、CSSでは属性の値を前方一致や部分一致でセレクターに指定できることを知ったので備忘録として残しておきます。

IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。

CSSのセレクターの使い方について詳しくはこちらの記事をご覧ください。

前方一致をセレクタに使う

まずは前方一致で指定する方法です。以下のように記述して指定します。

CSSのセレクタの前方一致

例えば、以下のような内部リンクと外部リンクがあるとして、前方一致を用いれば簡単にスタイルを分けることができます。

HTML

<a href="http://example.com">http://example.com</a>
<a href="./sample">sampleへ</a>

CSS

a[href^="http"]:after{
    content:"\f35d";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-left:5px;
}
a[href^="./"]:before{
    content:"\f105";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-right:5px;
}

プレビュー

前方一致でスタイルを分ける例

部分一致をセレクタに使う

続いては部分一致でセレクタを指定する方法です。以下のように記述します。

CSSのセレクタの部分一致

例えば、以下のような下層ページへのリンクがあるとして、部分一致を用いれば簡単にスタイルを分けることができます。

HTML

<a href="./news/sample">お知らせ記事へ</a>

CSS

a[href*="/news/"]::before{
    content:"\f05a";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-right:5px;
}

プレビュー

部分一致でスタイルを分ける例

後方一致をセレクタに使う

最後は後方一致でセレクタを指定する方法です。以下のように記述します。

CSSのセレクタの後方一致

例えば、以下のような下層ページへのリンクがあるとして、後方一致を用いれば簡単にスタイルを分けることができます。

HTML

<a href="./mail-form">メールフォームへ</a>

CSS

a[href$="/mail-form"]::before{
    content:"\f0e0";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-right:5px;
}

プレビュー

後方一致でスタイルを分ける例

まとめ

以上がCSSのセレクターで前方一致や部分一致を使って指定する方法です。

前方一致や部分一致を使いこなせば、わざわざ専用のクラスを付与する手間が省略できるので便利ですね。

ちなみにこのセレクタの指定の仕方はJavaScriptのquerySelectorAllでも使えます。

広告
広告

関連する記事

サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。