CSS3 の否定疑似クラスの使いどころ

CSS3 の否定疑似クラス :not() って、使う機会があまり無さそうとか思ってたんだけど、Bite Size Standards で属性セレクタと組み合わせた使用例が紹介されてて、なんかそのピンポイントで指定できてる感がクール!つうか、そうか、そういう使い方かぁ。

input[type="text"]:not([size]) { 
    width: 15em;
}

上記コードを解説すると、type="text" な input 要素で size 属性が指定されていないものは width: 15em; ってことになる。うーん、これをユーザスクリプトで指定しておくのも良いかも。size が指定されてなくて入力欄の幅が狭いのって意外とストレス感じるし。

自サイトでも、クラスや ID をわざわざ付与してなくても否定疑似クラス使って指定できるもんって他にもありそう。例えば、(X)HTML の方で width や height を指定していない img 要素に対して、 img :not([width]):not([height]) で一括して統一した width と height を CSS の方で指定するとか。

そんな事をボンヤリと考えていたんだけど、それほど面白いアイデアが浮かばなかった。なんか、他に「これは!」って使い方ないかな。

参考

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/31

Comments

itochan said:

はじめまして。ネタで、こんなのを考えてみました。(公開不要)
いつ使うんでしょう?

a:not([href]) {
color:#0000ff;
text-decoration:underline;
}

e-luck said:

うーん、確かに使う機会はかなり低そうですね(笑