記事一覧

要素が一つだけの時に適用するCSS疑似クラス

:only-child と :only-of-type

iPhoneではマウスオーバーが使えないのでSiReFaSoでゴーストの立ち絵が見れません。でも全部表示したら邪魔そうです。それでもどうしても見たいので、個別URLでは見れるようにしました。

ファイル 107-1.png

HTMLは共通で利用したいし、JavaScriptは使いたくない。CSSだけでトップと個別URLで表示のON/OFFを切り替えるために、要素が一つだけの時に適用するCSS疑似クラスを覚えたのでメモしておきます。

div:only-child {}
div:only-of-type {}

only-childは自身が親要素に対して唯一の子要素である場合、only-of-typeは自身と同一の要素が兄弟要素にいない場合です。

SafariはCSS3使い放題で良いですね。これで個別URLの他に、検索で一件だけヒットした場合も適用されます。あとはブラウザでゴーストが動作すれば完璧ですね。