CSS セレクタの話

こんにちはー。おひさしぶりです。
web制作にかかわってる人ですー。

前回はcss3のジェネレーターの紹介をさせていただきましたが今回は「cssのセレクタ」のお話をさせていただこうかと思います。

そもそもセレクタって何よとおっしゃるあなた！
（…え、ぐぐったらいっぱい出てくるやんて？それを言っちゃあおしまいってことで）

cssの基本記法は以下の通り

セレクタ{プロパティ:値}

「セレクタ」で指定した要素に「プロパティ」に応じた「値」を適用させていくわけです。

平たく言うと

p{color:red}

だと
pタグのcolor(文字色を設定するプロパティ)をred(赤)に変更するよって感じです（ちゃんと平たいかな）

で、ここからが本題。
このセレクタ、今まで散々使ってきたidやclass、タグ以外も設定できるんです。
詳しくはこちらーと投げてしまってもいいのですがまぁそれではあまりに味気ないので、いくつか例をご覧にいれまshow!

まずは代表選手！

「(タグ)」、「.(クラス名)」、「#(id名)」
わかりやすい表とかは後ろの方で紹介するとして、
「(タグ)」：aタグとかpタグとかspanタグとかタグを指定する（先ほどの例でもありましたね）セレクタです。そのまんまです。

「.(クラス名)」：たとえばクラス「foo」を指定したい場合「.foo」と書けばクラスを「foo」と設定された要素全てに値を適用できます。

「#(ID名)」：もうお分かりでしょう、↑のID版です。

次！属性セレクタ

「()[foo]」：fooという属性を持っている要素って意味なのですが、たとえばa[href]と書くと「href属性を持っているaタグ」が指定されます。

「()[foo="yee"]」：fooという属性がyeeと言う値を持っている要素…どんどん説明が長くなるぞ……どうしよう。
a[href="n.png"]と書いてあれば<a href="n.png">となっている要素が指定できるのですよ。

ここから！ここからね！

「()[foo^="yee"」：なんか妙な記号でてきましたね！なんでしょうねこれ！この記号がつくとfoo属性がyeeで始まる値の要素を指定できるのです！
これは実はちょっと便利でして、同じページでページ内リンクを設定してるaタグだけ指定したい時とかはa[href^="#"]とすれば指定出来ちゃうんです。

それの後ろ版
「()[foo$="yee"]」:こっちは後ろがyeeになっている要素を指定できる！
たとえばpdfファイルにリンク張っている要素にだけスタイル付けたいな―なんて思った時はa[href$=".pdf"]とすれば指定できるノデス！

他にも:first-childやら:nth-child(n)やら隣接(+)やらなんやらございますが今日はこのへんで！

各セレクタの詳しい対応表など詳しくはこちらのページが参考になります！

CSS3リファレンス(なんたって天下のcssリファレンスですから！辞書みたいに見に行ってますよ！)