CSS3では属性や間接などセレクタが大きく拡張されました。 中には細かい箇所すぎてよほど複雑なデザインをしない限り使いドコロの難しいものもあります。
しかし、それらを覚えておいて損はありません。
StylishやGreasemonkeyなどの拡張機能を使うときや、拡張機能を自作するときの表現の幅が大きく広がります。
いつ使うか？
今回は、CSSセレクタのうちのひとつ、間接セレクタのお話。
兄弟関係の要素を選択できるという使いドコロの難しいセレクタですが、Google Chromeの拡張機能を作るのに間接セレクタにお世話になりまくりました。
たとえばこんなコードがあるとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<section id="hoge"> <article class="post"> <header><h1>user1</h1></header> <div class="content" data-userid="user1"><p>aaa</p></div> <div class="link">リンク</div> </article> <article class="post"> <header><h1>user2</h1></header> <div class="content" data-userid="user2"><p>aaa</p></div> <div class="link">リンク</div> </article> <article class="post"> <header><h1>user3</h1></header> <div class="content" data-userid="user3"><p>aaa</p></div> <div class="link">リンク</div> </article> </section> |
id=”hoge”の中に投稿があり、articleタグで括られいます。
投稿にはheaderと本文（class=content）とリンク（class=link）があります。
ユーザーを判断できるのは data-useridという属性だけです。 一番親となる要素にユーザーを判断できる要素をつけてほしいのですが、最近のウェブサービスではこういう構造も増えてきました。
使ってみる
それでは本題。
この時に、user2のclass=linkだけを選択するにはどうしたらいいだろうか？
単純にclass=linkを指定する？
|
1 2 3 4 |
.link{ background:#ff0000; } |
これではすべてのユーザーに適用されてしまいます。
属性セレクタでユーザーを指定しても・・・
|
1 2 3 4 |
div[data-userid="user2"] .link{ background:#ff0000; } |
class=linkはdiv[data-userid=”user2″]の子要素ではないため適用されません。
そこで登場するのが間接セレクタ。
div[data-userid=”user2″]と同じ親要素を持ったclass=linkに適用されられます。
|
1 2 3 4 |
div[data-userid="user2"]~.link{ background:#ff0000; } |
動作サンプル
親要素の中で適用されるため、その後ろのuser3のclass=linkには影響がありません。
これで無事に目的の要素にスタイルを適用することができました。
実例
ちなみにこの方法を使ってChrome拡張機能を作りました。
この拡張機能は、Google+で特定の人物が共有した画像にだけボカしをかけるというもの。
人によってはとても有用な拡張機能です。
仕組みは単純で、Google+のソースコードに以下のCSSを加えているだけ。
|
1 2 3 4 5 6 |
a[href*="photos/{userid}/"], a[oid="{userid}"]~div.gv div.Ry { -webkit-filter:blur(10px) !important; } |
このソースコードで特定のユーザーが共有した画像すべてに10pxのぼかしがかかります。
訂正とお詫び
“間接セレクタ”の表記がすべて”関節セレクタ”となってました。修正しました。。。
なんでこんな記事かいてしまったんや・・・
だいたいエロペンのせい
まさにそれｗｗ
ブロックでもミュートでもない新しい隔離方法を提案！！