CSSで効率アップ！便利な属性セレクタ

毎日寒いですね！
私の住んでいる地域では今週少し雪が積もりました。
年末までもう数えるくらいしかありませんが、今年やるべきことは今年のうちに頑張りましょう！

今回は覚えておくと便利な属性セレクタのご紹介をします。
すでに知っている方もいるかも知れませんが、知らなかった方は便利なのでぜひ使用してみてください。

属性セレクタというのは、属性や属性値の内容によって指定する値のことを指します。
例えば、


<a href="index.html" target="_blamk"></a>
<p class="text"></p>
<input type="submit" value="送信"></input>

このようなソースはHTMLでしょっちゅう記述しますよね？
このソースの

href=”index.html”
target=”_blamk”
class=”text”
type=”submit”
value=”送信”

これらをまとめて「属性」といいます。
もっと詳細をいうと
hrefやtypeを属性名、_blamkやsubmitを属性値といいます。

この「属性」を使ってCSSで、細かく指定することができるです。
これだけじゃいまいちピンと来ていない人も多いはず。

実際にどういう指定のやり方をするのかを書いていきますね。

例えば次のようなソースの場合。

属性にclassが入っている要素にだけスタイルを指定という指示をしました。
こういった使い方ができるんです。
サンプルのように短いソースだとクラスに指定してしまえば…と思うかもしれませんが、使い方によってはすごく便利な機能ですよね。

上記のソースのように、別タブで開く_blankの設定をしているaタグだけに、テキスト右側にマークをつけることができます。
使い方はいろいろできますので、試しにやってみてください。

=(イコール)の前に~（チルダ）をつけると、classなどの属性名に複数の値が与えられていても、指定したものが一致すれば適用されます。
これも使い方によってはすごく便利です。

他にもいろんな使い方（例えばアンカーリンクの場合）なども指定して使用でると思うのいろいろ挑戦してみてください。

対応ブラウザについて触れていませんでしたが、IE8以上はどのブラウザでも対応していますので安心して使用できると思います。
少しでも効率アップできるといいですね！

Creator Note