こんにちは。ビーズクリエイトの野尻です。
今回は自身の備忘録も兼ねて、普段の制作業務で非常にお世話になっているCSSセレクタをご紹介したいと思います。
CSSセレクタとは？
CSSセレクタとはCSSスタイルを適用する対象を指定できるモノです。
htmlタグや、タグに指定したID・クラスを対象として、色々な条件を付けてスタイルを適用することができます。
何が便利かというと、CSSだけで条件分岐的な処理ができることです。
一見if文などのスクリプトが必要と思われる処理も、案外CSSだけで実現できちゃったりします。
特にCMS構築するときなんかに役立つことが多いです。
それでは下記に紹介していきたいと思います。
①最初に現れる要素にだけ適用
:first-child
【こんなとき便利】
メニューを作るときなんかに最初のliだけ、左マージンを無くしたい！というときに便利です
【使い方】
ul li:first-child{
margin:0 0 0 0;
}
②最初に現れる文字にだけ適用
:first-letter
【こんなとき便利】
見出しなどの最初の文字だけちょっと大きくしてステキさを演出したい、でも最初の文字だけいちいちspanで区切るのも面倒！というときに便利です
【使い方】
h2:first-letter{
font-size:120%;
}
③n番目に現れる要素に適用【CSS3】
:nth-of-type(n)
【こんなとき便利】
パンくずを階層別にスタイル分けしてステキさを演出したい、でもいちいちクラス分けするのも面倒！というときに便利です
【使い方】
ul li:nth-of-type(1){
color:#333;
}
ul li:nth-of-type(2){
color:#666;
}
ul li:nth-of-type(3){
color:#999;
}
④特定の属性を持つ要素に適用
E[foo]
【こんなとき便利】
aタグにtarget=”_blank”指定してあるやつだけ、ちょっとイメージ変えてステキさを演出したい！という時に便利です
【使い方】
a[target]{
color#f00;
}
⑤属性の値が指定した文字を含む場合に適用する【CSS3】
E[foo*=”bar”]
【こんなとき便利】
↑のさらなる派生で、指定した属性の中に特定の要素が入っていたとき適用されます
imgタグに指定したaltの中に特定の文字列が入っているときだけスタイルを変えてステキさを演出したい！というときに便利です
【使い方】
img[alt*=”ステキ”]{
border:5px solid #ccc;
}
※altに「ステキ」という文字列が含まれているimgだけborderを適用します
まとめ：意外とCSSだけでなんでもできる
セレクタを活用することで、一見無理そうな表現も意外と実現できることが多いです。
特に最後の「属性の値が指定した文字を含む場合に適用する」を活用すれば、ほぼなんでもできる感がありますね。
うまく使えばけっこうな無茶ぶりにも（たぶん）対応可能ですお任せください！※お手柔らかに
もっとうまくまとめているサイト
http://weboook.blog22.fc2.com/blog-entry-268.html
ビーズクリエイトではデザイナーを募集しています。
Webデザイン、紙媒体（チラシ・パンフレット）デザインに興味のある方、ぜひご連絡ください！
