セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点
その他の擬似セレクタ
もうその他で強引にまとめてしまいますが、一つ一つが結構特殊です。
今まで記述してきたセレクタを理解していればうまく使えると思います。
E要素の前にコンテンツを追加「E::before」
E::afterの逆バージョンで、E要素の前にコンテンツを追加することが出来ます。
サンプルはこちらp::before{
content:"【ここにcontentを追加】";
}
ドキュメントのルート（HTML）を指定「:root」
ドキュメントのルートを指定できます。これはhtmlを指定することと同義になります。
例）html{background-color:#ccc;}と:root{background-color:#ccc}は同義
サンプルはこちら:root{
background-color:#ccc;
}
:lang()「E:lang()」
E要素の中でlang属性が設定されている部分を指定できます。
例）lang=”en”部分のみ赤背景にしたい など
サンプルはこちらsection :lang(en){
background-color:#fcf;
}
E要素の前にコンテンツを追加「E:target」
a要素にターゲットされている要素が有効なときのE要素を指定。
urlの最後に#hogeと着いた状態のときに、#hogeの部分が指定した状態になるということです。
これはサンプルを見てもらうのが一番判ると思います。
サンプルはこちらarticle:target{
display:block;
}
E要素で、指定したセレクタ以外のを指定「E:not(任意のセレクタ)」
今まで説明してきたセレクタの逆の状態の要素を指定できます。
例）E:not(:empty)の場合、子要素が空ではないE要素を指定します。
サンプルはこちらtd:not(:empty){
background-color:#ccc;
}
参考にしたサイト
下記のサイトを主に参考にさせていただきました。
むしろ下記のサイトの方が判りやすい書き方だと思います。。。
- RedLine Magazine : CSS3 :target擬似クラスでイメージギャラリー
- CSS セレクタに関するおさらい 2 | WWW WATCH
- CSS セレクタに関するおさらい 3 | WWW WATCH
セレクタのまとめ
自分がやってみた感想としては以下の感じかと思います。
- 文章構造次第では、HTMLがよりスッキリする
- 動的なページも対応しやすくなる。
- ただ量が多い
といった感じでしょうか…
今までclass=”first”やclass=”even”などを使っていた方などはずいぶんと楽にコーディングが出来るようになるのではないでしょうか。
というか自分自身がそうなのですが＞＜
cssの書き方をよく考えることで、動的に生成された部分があるとき、ないときでページの表示を変えることが容易にできたりします。
という感じでとりあえずセレクタについては以上です。
まだ細かいのが残っていたりしますが、それはまた別の機会にまとめてページでも作りたいと思います。
次回は画像なくてもこんなに凄いんだぜ！CSS3は！（仮）です。
