全称セレクターは擬似要素にマッチしない

Mediumの印刷スタイルシートの記事を読んでいた。印刷スタイルシートについては常に盛り上がりに欠けるような印象だが、Mediumのデザイナーが書くと盛り上がってくれるんじゃないかとちょっと期待している。ついでに少しこのウェブサイトの印刷スタイルシートに手を入れていたところ、どうやら全称セレクターは擬似要素にマッチしないという、あまり関係のないことを今さら学んだ。

* {
  color: black !important;
}

このウェブサイトの印刷スタイルシートではこのようにして、強制的に文字を#000000で印刷させるようにしていた。よくよく確認してみると、実際に印刷するまでもなく、印刷プレビューの状態でも一部色がおかしいことに気付いた。おかしい部分は全て擬似要素で挿入した文字列だった。

最初は全称セレクターが詳細度においてもっとも弱いことに由来する問題かと思ったが、この例では!importantフラグでも逆転できていないため、詳細度の問題ではないようだ。つまり全称セレクターは擬似要素にはマッチしないということになる。

Demo: Universal Selector and Pseudo Element

デモでは擬似要素で挿入した文字列を赤にし、それを全称セレクターと!importantフラグを使って上書きしようとしている。しかしうまくいかない。マッチしないでまず間違いないだろう。確認はChrome 40とInternet Explorer 11、Firefox 35で行った。

実際にどう対処するべきかというと二通りに分かれると思う。ひとつは普通に擬似要素の文字色も直してしまう方法だ。

*,
*::before,
*::after {
  color: black !important;
}

もうひとつは擬似要素は印刷しないことにする方法だ。

* {
  color: black !important;
}

*::before,
*::after {
  display: none !important;
}

擬似要素で挿入する文字列等がクリティカルな要素であるべきではないことを考慮すると、後者の方がより良い印刷結果をもたらしそうではある。その反面、印刷結果でも擬似要素を使って補助的な情報や飾りを挿入したいようなケースに対する柔軟性に欠ける。前者が無難か。