「特定要素の親を指定する」 できると便利なのにな～というケースがありますよね。
CSS4 であらたに定義される擬似クラス:has()でこれが可能なのです。
しかし、残念ながら CSS4 に対応しているブラウザは現状ではありません。
今回は代替えとして、jQuery を使い同様の結果を実現してみます。
例えば、次のようなspan.show_offの親要素、つまり、2番目の li を指定したいとします。
<ul>
<li>普通の表示</li>
<li><span class="show_off">親要素を変更</span></li>
<li>普通の表示</li>
</ul>該当の li に jQuery でクラスを付与することで、別のスタイルを適用します。
<script>
jQuery(function($){
$("ul li:has(.show_off)").addClass("accent");
});
</script>実行後のソースには目的の2つめの li にaccentというクラスが追加されます。
<ul>
<li>普通の表示</li>
<li class="accent"><span class="show_off">親要素を変更</span></li>
<li>普通の表示</li>
</ul>あとはスタイルを指定します。
<style>
.accent {color:cornflowerblue;}
</style>こちらが出力結果です。
- 普通の表示
- 親要素を変更
- 普通の表示
まあ、このようなケースでは通常はnth-childを使いますよね。
もうひとつ用例を紹介します。
oEmbed によるブログカード使用の際には URL を直書きしますが、デフォルトでは wpautop 関数により P タグが付与されるため、<p><iframe></iframe></p>のようになります。
Youtube 動画のエンベットや埋め込みでも同様ですね。
ソース上の美しさはさておき、動作自体に問題はありません。
ただ、ほとんどのケースで p タグには、マージンなどのスタイルが適用されているでしょう。
そのなかにiframeが配置されることで意図したレイアウトが行えない場合があります。
下記では本文を表示しているdiv.contentの p タグ内に配置したiframeの親要素の p タグにクラスを付与しています。
<script>
jQuery(function($){
$("div.content p:has(iframe)").addClass("iframe-outer");
});
</script>出力結果は<p class="iframe-outer"><iframe></iframe></p>となり、この p タグのみ別のスタイルを適用できます。
<style>
.content p.iframe-outer {
margin:0;
padding:0;
}
</style>本来は親要素の p タグそのものを消して、必要に応じて iframe にスタイルを適用する方がよいですね（笑
下記で iframe の親タグ、つまり、p タグが除去されます。
<script>
jQuery(function($){
$('div.content iframe').unwrap();
});
</script>直打ちの HTML ではじめからクラスなどを付与すれば済む話ですが、WordPress のように自動的にタグが追加される CMS では意外に使い道があるのではないでしょうか。
