" >"子セレクタって積極的につかってる?? いまのユーザが使ってるブラウザは対応してるのかな
大体対応してるでしょ。
可読性が下がるので、あんまり使わない。というか上書きされる条件がよくわかってないので、避けている。
え、孫以下に伝染しないからむしろ使いやすいんじゃないかと。。
同じ要素に対して別のスタイルを適用する場合がよくわからないんですよ。たとえば、.parent > .child を.parent .child[data]とかで上書きできるのかとか。
参考になるサイトとかありますかね?
cssの勉強したら?
で、上のコードの場合、どっちがSpecificityが上かぱっと見わかりますか?
それって、.parent+.parent2と、.parent2[data]のSpecificityは分かるのかって話にならない?
優先順位の問題って、直属セレクタだけじゃなくて、隣接セレクタでも否定セレクタでも同じことが言えるわけで、よくわかんないからCSS3セレクタ使わないって言ってるのと同じなのでは。。分かんなかったら都度調べればいいじゃん。
自分だけわかるならいいけど、ほかの人が解読するのにいちいち調べるの非効率的だから避けてるって話。クラスで代用できるんだったらそれでいいと思うんだけど。
CSS3セレクタでした出来ないことは使えばいいとおもうよ。:rootとか:targetとか。:emptyとかは.emptyでいいと思う。
>ほかの人が解読するのにいちいち調べるの非効率的だから避けてる
それはチームの問題であって一般的な問題じゃない。
チームもメンバーは入れ替わるんだから、入りやすいほうがいいじゃん。フリーランス同士とかメンバー固定じゃないし。サイト作った後、次どこの誰が担当するかもわかんないし。
>それはチームの問題であって一般的な問題じゃない。
Specificityのわかりにくさは一般的な問題だと思うけど。これをわからず上書きしようとしたら確実に無駄なコードが増えるし、最悪の場合、先祖のID書いたり、!importantとか書いちゃう人も出てくる。
このわかりにくさをどっかで線引きするとしたらどこにするのかって問題も出てくる。:lang(en) > *:nth-last-of-type(2n+1)みたいにややこしいのはやめようとかになるとそのルール自体がややこしくなる。
ちなみに誰も答えないから言うけど、.parent > .childを.parent .child[data]で上書きできる。+、~、>はspecificityには影響しない。
結構使います。class, id を使わずにリストタグを入れ子にする場合とか、かなり必要です。
ほんとだ。tableを入れ子にしたときとか、tdをとくていするのに#parent >table>tbody>tr>tdこう書かないといけない・・・これはひどい
#parent > table td {}でいいじゃないか。入れ子しない前提なら。
入れ子にするから>が必要やん?
IE7以上に対応してるから、今はほとんどの案件で使ってるな。他のCSSセレクタだと+,:first-child,[attr]とかこの辺も積極的に活用してる。:first-childについてはIE7でバグがあるけど、把握してりゃ問題ない。
みんなの回答 4 件
大体対応してるでしょ。
可読性が下がるので、あんまり使わない。
というか上書きされる条件がよくわかってないので、避けている。
Can I use CSS 2.1 selectors
http://caniuse.com/css-sel2結構使います。class, id を使わずにリストタグを入れ子にする場合とか、かなり必要です。
ほんとだ。
tableを入れ子にしたときとか、tdをとくていするのに
#parent >table>tbody>tr>td
こう書かないといけない・・・これはひどい
IE7以上に対応してるから、今はほとんどの案件で使ってるな。
他のCSSセレクタだと+,:first-child,[attr]とかこの辺も積極的に活用してる。
:first-childについてはIE7でバグがあるけど、把握してりゃ問題ない。
関連するトピックス