概要
状態:-
閲覧数:1,455
投稿日:2015-07-13
更新日:2015-07-13
CSS3
・指定子要素を持つ親要素 … 選択不可
・指定親要素を持つ子要素 … 選択可
CSS4
・指定子要素を持つ親要素 … 選択可
・但し、ブラウザ実装状況不明
・試した限りではうまくいかず
・指定子要素を持つ親要素 … 選択不可
・指定親要素を持つ子要素 … 選択可
CSS4
・指定子要素を持つ親要素 … 選択可
・但し、ブラウザ実装状況不明
・試した限りではうまくいかず
やりたかったこと
子要素でaタグを持つspanタグのみセレクトしたい
<span class="apage"><a href="/">3</a></span>
<span class="page">4</span>
CSS3では対応不可
調査した結果分かったこと
・CSS3では対応不可
・CSS4は動作確認不可
jQueryでは選択可能
・しかし、わざわざこのためだけにjQueryを使用したくない
HTML5より、aタグはdivタグを囲うことが可能
HTML5より、aタグはdivタグを囲うことが可能
HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>～</a>で囲んでリンクを指定できるようになっています
対応
<a href="/"><span class="apage">3</span></a>
<span class="page">4</span>
指定親要素を持つ子要素はCSSで選択可能
a > span （子要素spanにのみ適用）
CSS3では指定子要素を持つ親要素は選択不可だが、指定親要素を持つ子要素は選択可能
具体例
pagerクラスを付与したdivタグ内にあるリンクをマウスオーバーした際、その子要素でかつ、jumpクラスを付与したspanタグにスタイルを適用
div.pager a:hover > span.jump{
border-radius: 9px;
background-color: #222;
color: #fff;
}