CSSセレクタにワイルドカードや正規表現を使いたいとき

style.cssなどにスタイルを定義する場合、同じような名前を持つCSSセレクタをまとめて定義するため、ワイルドカードや正規表現を使いたくなる場面があります。

たとえば、WordPressで画面に表示するアイキャッチ画像のスタイルを変更する場合を考えてみましょう。

スタイルを適用するセレクタを決めるため、HTMLソースを見てアイキャッチ画像に付加されたclass属性「attachment-post-thumbnail」を参考に、次のようなスタイルを定義するかもしれません。

img.attachment-post-thumbnail {
    border-radius:25px;
}

表示イメージは次のようになります。

アイキャッチ画像⁽¹⁾のスタイルだけが変更され、投稿内の画像⁽²⁾にはスタイル変更は適用されません。

これで良いような気がしますが、アイキャッチ画像のclass属性は固定ではないことに注意が必要です。

多くの場合、アイキャッチ画像はテンプレート内で「the_post_thumbnail()」で表示されていますが、「the_post_thumbnail('thumbnail')」のように表示する画像の種類が指定されている場合は、「attachment-thumbnail」のようなclass属性が付加されます。

そもそも「the_post_thumbnail()」は「the_post_thumbnail('post-thumbnail')」のことなので、the_post_thumbnailで表示するアイキャッチ画像には、

attachment-画像名

というclass属性が割り振られるということです。

この場合、考えられるclass属性をまとめてスタイルを定義しておけば良いかもしれませんが、次のように記述するのは面倒です。

img.attachment-post-thumbnail,
img.attachment-thumbnail,
img.attachment-medium,
img.attachment-large {
    border-radius:25px;
}

また、「the_post_thumbnail(array(150, 100))」のようにサイズを指定してアイキャッチ画像を表示した場合、class属性は「attachment-150x100」になることを考えると、1つずつCSSセレクタを定義するのは非常に面倒です。

その場合、CSSの属性セレクタに「*」を使って「class属性に attachment- が含まれるimgタグ」と定義しておけば便利です（CSS3）。

CSSセレクタにワイルドカードや正規表現を使って条件を指定するイメージでしょうか。

img[class*="attachment-"] {
    border-radius:25px;
}

※Twenty Twelve、Twenty Thirteen、Twenty Fourteenのstyle.cssにも、このような属性セレクタを使ったスタイル定義があります。参考にしてください。

これで、幅と高さを指定してアイキャッチ画像を表示した場合でも、「attachment-150x100」のようなclass属性に対してスタイルが適用されます。

ちなみに、アスタリスク「*」は「～に～を含む」のように使えますが、その他、次のような文字も使うことができます。

• 「*」 --- を含む
• 「^」 --- で始まる
• 「$」 --- で終わる

記述例は次のようになります。

img[class^="attachment-"] {
    border-radius:25px;
}

img[class$="-image"] {
    border-radius:25px;
}

以下、アイキャッチ画像の表示に使うthe_post_thumbnail関数の呼び出し方と表示されるアイキャッチ画像、付加されるclass属性をまとめておきます。参考にしてください。

アイキャッチ画像の表示	表示される画像	class属性
the_post_thumbnail()	アイキャッチ画像	attachment-post-thumbnail wp-post-image
the_post_thumbnail('thumbnail')	サムネイル画像	attachment-thumbnail wp-post-image
the_post_thumbnail('medium')	中サイズ画像	attachment-medium wp-post-image
the_post_thumbnail('large')	大サイズ画像	attachment-large wp-post-image
the_post_thumbnail(array(150, 100))	任意のサイズの画像	attachment-150x100 wp-post-image