CSSの疑似要素『::before』『::after』 etc をSTYLE要素でHTMLに直接記述できるかどうか調べてみた

# WEB制作

2020.02.15

WordPressの案件で、1つの記事にスタイルを当てたかったのでインライン記述をしていたのですが、疑似要素が効かなかったので調べてみました。

疑似要素はインライン記述できるのか

結論から言うとできませんでした。

できなかったのですが、いろいろ調べてみると紛らわしい情報がたくさんあったのでまとめてみました。

まずは『W3C 標準情報 (TR) の草案』を翻訳したページに

XML ベースの文書形式がすべて “style” 属性を用意していて、ユーザが CSS で文書や文書中の特定の要素にスタイル指定できるというわけではありませんが、 ある形式で “style” 属性が用意されており、その属性の値に CSS を使えるような場合については、 この仕様がその属性の構文と解釈を規定します。

ここでいくつか例を示しましょう。

  1. 擬似要素や擬似クラスを使わず、要素自体のプロパティのみを設定する。
  2. 要素に加え、’::first-letter’ 擬似要素を使って要素の 1 文字目にもプロパティを 設定する。この場合は大括弧 ({…}) が必要になる点に注意してください。
  3. 擬似クラスを使って、動的な状態のそれぞれについて、 ソースアンカーにプロパティを設定する。

HTML の “style” 属性における CSS 規則の構文

要素に加え、’::first-letter’ 擬似要素を使って要素の 1 文字目にもプロパティを 設定する。この場合は大括弧 ({…}) が必要になる点に注意してください。

という記述がありました。

See the Pen
疑似要素のインライン記述
by sank (@sank_f)
on CodePen.

ただ上記結果を見てもらえればわかりますが、このソースをそのまま書いても実装できません。

  • ひとつめがインライン記述を試みた結果。
  • ふたつめがクラスを付与しCSS記述をした結果

になります。

これはあくまでも2001 年 3 月 5 日の草案なので、実際には実装されずに終わったのかもしれません。

ですので、冒頭にも書きましたが、現状では疑似要素のインライン記述は不可能でした。

WordPressで1つの記事だけスタイルを変更したい

今回の私がそうだったのですが、1つの記事だけスタイルを変更したい。
使用しているWordpressテーマにカスタムCSSエリアがない。
HTMLにインライン記述したいが、疑似要素を使用しなくてはいけない。

そんな時があるかもしれません。

そんな時は「テキスト」タブで、変更したい箇所に「タグ」と「独自クラス」を付与しましょう。

WordPressには右ナビの「外観」→「カスタマイズ」内に「追加CSS」エリアがあるので、そこに追記したクラスにスタイルを付与すれば、そのページの「独自クラス」を付与した箇所だけにスタイルを適用することができます。

独自クラスは他のページで使用していないクラス名を使用してください。
そうしないと書いたスタイルがクラスを付与した箇所すべてに当たってしまいます。
だからといってあまりにもおかしなクラスを付与すると笑われるので、気を付けてください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~