「特定要素の親を指定する」 できると便利なのにな～というケースがありますよね。
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では意外に使い道があるのではないでしょうか。
