2010-03-01から1日間の記事一覧

セレクター飽きてきた。。

あと少しなんだけど今日はもう疲れたので終わろう。。 残りのセレクター全部まとめたらSICPに戻ろっと。でもこのセレクター、多分CSSだーイベントだーを操作するのに必須だから、 それこそ手足のように使いこなせるようになる必要があると予想。 みっちりや…

セレクターその18(CSSの属性セレクター[attribute^='value'],[attribute$='value'],[attribute*='value'],[attributeFilter1][attributeFilter2](複合タイプ) [CSS3])

属性値を文字列とみなして、「^」は先頭、「$」は末尾、「*」は含むかどうか、複合タイプは全ての条件をandで、 それぞれ判定する。 んで、合致する場合のみ抽出する。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //先頭が'f'で…</head></html>

セレクターその17(CSSの属性セレクター[attribute='value'] [attribute!='value'] [CSS3])

前エントリにさらに等号と不等号の条件をつけることが可能。 サンプルは指定した属性の値が同じく指定した値に等しいものを抽出する。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("[class='fourth']").css("c…</head></html>

セレクターその16(CSSの属性セレクター[attribute] [CSS3])

[attribute]で指定したattribute属性を持っている要素が抽出される感じ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //id属性を持つタグだけ色が赤になる。 $("[id]").css("color","red…</head></html>

セレクターその15(only-child擬似クラス[CSS3])

こいつは使い道がイメージできないなぁ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //一行目のspanだけ色が赤になる。 $("li span:only-child").css("color","red"); }) </head></html>

セレクターその14(last-child擬似クラス[CSS3])

これも〜、最後の合計金額を出す為のフッターとかで背景色を指定したいときとか使えるか。 そんなこと行ったらfirst-childもヘッダーのバックカラー指定できるな。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:las…</head></html>

セレクターその13(nth-child擬似クラス[CSS3])

こ、これは・・・!! テーブル行の背景色を交互に変更したい場合なんかにものすげー役に立つぞ!特定のセレクターから指定した番号の要素だけを指定できる。 セレクターの後ろに :nth-child(番号) と記述する。チーと長いが、後でみて参考にするためにも。…

セレクターその12(empty擬似クラス[CSS3])

子要素やテキストを含まない要素を指定できる。 セレクターの後ろに :empty と記述する。あ〜、これはテーブルでやってみたいなぁ。自前タグをテーブルでやってみよう。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:no…</head></html>

セレクターその11(否定擬似クラス[CSS3])

セレクター内で特定の条件「以外」のものを指定できる。 セレクターの後ろに :not(...) を付け、除外する条件を (...) 内に記述すると。サンプルだとnotの括弧中には擬似クラスである:first-childが指定されているけど、ようするにセレクターフォーマットの…

セレクターその10(間接セレクター[CSS3])

特定のセレクターの後に出現する要素を指定できる。 セレクターと要素を ~(チルダ)で結びつける。前とか後ろとか先頭とか、そういう表現があるときは要素の並びのことを意味するっぽい。 サンプルの状態から、また別のケースを考えてやってみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.</script></head></html>…

セレクターその9(first-child擬似クラス[CSS2])

特定のセレクターのうち最初に登場する要素のみを指定するセレクター。 ってことなんだけど、いまいちわかんねー。 サンプルではli要素を指定しているけど、liは連続していることが前提なのか? と思ったので、ちょっと自分でも要素を追加してみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">goog</script></head></html>…

セレクターその8(隣接セレクター[CSS2])

隣接セレクター 指定したセレクターの次に出現するセレクターを指定できる。 「基準となるセレクター + 次に隣接しているセレクター」のフォーマットで指定。idだけでなく、classや子セレクターとも混ぜてみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(…</head></html>

セレクターその7(子セレクター[CSS2])

特定の要素の直下に配置された要素を指定できるのが「子セレクター」です。子セレクターは親要素と子要素を >(大なり/greater than)で結びます。入れ子と別のセレクター(IDとclass)も試してみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(…</head></html>