CSS4の親要素指定

CSSは現状親要素を指定することが出来ません。自分のサイトを構築するときは自分でコードを自由に書けるので、クラス名を付与するなり特定の親要素を指定することは出来ますが、広告をブロックしたりする場合コードの変更が出来る訳ではないので、出来ることに制限があります。

しかしCSS4について調べてみると、親要素の指定が出来るようになるみたいですね。具体的には、「?」を頭に付けるとそれがCSSの適用対象になるようです。

CSS4を調べるきっかけになったのはヤフコメのソースです。「このコメントは非表示対象です。投稿内容に関する注意」をuBlockで非表示にしたいのですが、現状は「p.hideMes」と指定するしかないと思うのです。一応これで消えるには消えるのですが、このpタグの親の親の親であるliタグのクラス「commentListItem」にborder-bottomが適用されているので、ラインは消えず上のコメントと並んで2px分が表示されることになります。これでは見た感じちょっと気になります。

「commentListItem」は非表示コメントだけでなく全てのコメントに付与されているので、現状これで指定することは出来ません。CSS4なら多分「?li.commentListItem p.hideMes」と指定すれば良いのでしょう。こうすることで「p.hideMes」で非表示コメントを特定しつつ、上部階層のliタグに対して非表示を行うことが出来ます。こうすればランダーラインごとコメントが消えるはずです。

:hasで指定出来るようになるといった情報もありました。こちらで記述する場合、「li.commentListItem:has(p.hideMes)」のような感じになるのでしょうか。

CSS4でまた覚えることが増えますが、選択肢が広がるのは良いですね。

HTML5&CSS3デザイン 現場の新標準ガイド(特典PDF付き)