CSS3で追加されたワイルドカードの使い方を確認 #CSS #CSS3

CSS3で追加されたワイルドカードの使い方を確認 #CSS #CSS3

CSSといえば、すべての要素に適用できるワイルドカードみたいな「*」があります。リセットCSSやノーマライズCSSを書くときなんかに重宝するアレです。

さらに、ある要素において特定の属性についてのワイルドカードみたいなものがcss3で追加されました。これによって、これまで以上に柔軟な対応ができるようになりました。今回はそんなワイルドカードみたいなものについて、改めて確認してみました。

すべての要素に適用する 「*」(アスタリスク)

こんな感じで書くと、すべての要素に対して同じスタイルを適用させることができます。
よく使うのは、こんなのかな?

こうすると、すべての要素のmarginとpaddingをリセットできます。

特定の属性をもつものに適用する[ ](大カッコ)

こうやって書くと、E要素の属性fooにだけ適用することができました。自分がこれを使うときは、さらにもう一歩付け加えて、

こんな感じで、属性fooの値がbarになるときとする場合が多かったです。
例えば、

上のように書けば、a要素の中でも別タブ(別窓)を開くタイプのリンクに対してだけ、スタイルを適用することができます。そうすれば、外部リンクにだけ擬似要素::afterをつかって、アイコンを付け加えることもできます。最近ではFontAwesomeの中のあたりを一緒にくっつけることが多いです。

CSS3では、この特定の属性を持つものに対して適用させるスタイルに対して、特定のさせ方にワイルドカードみたいなものが追加されました。

属性の値が一致したときに使えるE[foo~=”bar”]

属性fooのあとに、~(チルダ)を加えることで、値が一致したときにだけスタイルを適用させることができます。
あ、でも、これはCSS2の時点でもあったようです。勉強不足でした(´;ω;`)ウッ…

属性の値が前方一致したときに使えるE[foo^=”bar”]

属性fooのあとに、^(これ、何て読むの?)を加えることで、値が前方一致したときだけにスタイルを適用させることができます。

自分の場合、wordpressでサイト作成することが多いので、最近は下のような感じで画像そのものをレスポンシブ対応させるようにしています。

こうすると、wordpressでメディアアップロードした画像に対してレスポンシブな機能が与えられて便利です。

属性の値が後方一致したときに使えるE[foo$=”bar”]

属性fooのあとに、$(ドルマーク)を加えることで値が前方一致したときだけにスタイルを適用させることができます。

ちょっと前に、pdfファイルだったら自動でファイルアイコンが出るようにするときに使っていましたね。これの便利なところは、リンク先の拡張子で後方一致させてファイルアイコンを表示できるところだと思います。いちいち書き込まなくて済むし。

属性の値に含まれるときに使えるE[foo*=”bar”]

属性fooのあとに、*(アスタリスク)を加えることで値に指定したbarが含まれるときだけにスタイルを適用させることができます。

含まれていればいいので、前方一致や後方一致とは違う使い方ができます。
例えばbootstarapのグリッドデザインではclass名をcol-サイズ名-数値のように設定しています。サイズ名のところだけを抽出して適用させたいスタイルがあるときには、きっと役立つはずです。

前方一致や後方一致で書くのが面倒なときなんかも使えるとは思いますが、あんまり多用すると何が何だかわからなくなることがあるので注意してください。実際、何が何だかわからなくなった経験ありです(笑)

442 views/total