[CSS] CSSセレクタの実用的な使い方を考えてみる : norm

CSS2やCSS3で定義されているセレクタの中で、自分が実用的だと思うものを復習がてらまとめてみようと思います。

first-letter を使って最初の一文字目を大きくする。

最初の一文字目を大きくすることで、雑誌のデザインで見られるような文字組を実現する。最初の一文字目を大きくすることで、雑誌のデザインで見られるような文字組を実現する。最初の一文字目を大きくすることで、雑誌のデザインで見られるような文字組を実現する。

p:first-letter {
 float:left;
 line-height:1;
 margin:.1em .1em 0 0;
 font-size:3em;
 font-weight:bold;
}

一文字目に背景色や背景画像を使ったり、色々応用ができます。

p:first-letter {
 float:left;
 line-height:1;
 margin:.1em .2em 0 0;
 padding:.2em;
 background:black;
 color:white;
 font-size:2em;
}

first-child を使って不要な区切り線を表示させない。（ul 編）

  
    aaa
    bbb
    ccc
    ddd
    eee

ul li:first-child {
 border-left:none;
}
ul li {
 display:inline;
 padding:0 1em 0 1.5em;
 border-left:#000 1px solid;
}

first-of-type を使って不要な区切り線を表示させない。（dl dt dd 編）

first-childが子要素の最初の要素にスタイルが適用されるのに対して、first-of-typeは同じ子要素の最初の要素にスタイルが適用されますので、以下のようにdt ddを横並びにした場合の区切り線に活用できます。nth-of-type(1)と指定しても同じ効果が得られます。

2012年02月10日: QVCマリンフィールド＆幕張メッセ舞洲サマーソニック大阪特設会場で8月18日(土)・19日(日)に開催される、＜SUMMER SONIC 2012＞の出演者第一弾が発表されグリーン・デイ、リアーナらの出演が明らかとなった。
2012年02月10日: サマソニ出演者第1弾にグリーン・デイ、リアーナら13組
2012年02月10日: サマソニ出演者第1弾にグリーン・デイ、リアーナら13組

  
    2012年02月10日
    QVCマリンフィールド＆幕張メッセ舞洲サマーソニック大阪特設会場で8月18日(土)・19日(日)に開催される、＜SUMMER SONIC 2012＞の出演者第一弾が発表されグリーン・デイ、リアーナらの出演が明らかとなった。
    2012年02月10日
    サマソニ出演者第1弾にグリーン・デイ、リアーナら13組
    2012年02月10日
    サマソニ出演者第1弾にグリーン・デイ、リアーナら13組

dl dd:first-of-type {
 border-top:0;
}
dl dt {
 clear:both;
 float:left;
 width:10em;
 padding:.5em 0;
}
dl dd {
 padding:.5em 0 .5em 10em;
 border-top:#000 1px solid;
}

nth-child() を使って幅一杯にぴったり要素を並べる。

このブログの記事部分の幅は640px。間隔を20px取って、200pxの鮭を3匹並べます。
nth-child(3n)と指定することによって3の倍数の要素にcssが適用されます。一昔前はjsやマイナスマージンなどを駆使して同じようなことをしていました。

#h240210 ul.nc2 li:nth-child(3n) {
 margin-right:0;
}
#h240210 ul.nc2 li {
 float:left;
 margin-right:20px;
}

nth-child() を使ってhtmlを汚さずナビゲーションにアイコンを指定する。

li要素それぞれにclassを指定する必要がなくなりhtmlは汚さないけれど、順序固定でcssのほうはあまりスマートではないので、この使い方は人それぞれかも。

  
    service
    portfolio
    about
    access
    contact

ul.navi li {
 float:left;
 height:16px;
 padding-left:20px;
 padding-right:20px;
 text-transform:uppercase;
 font-family:Georgia;
}
ul.navi li:nth-child(1) {
 background:url(service.png) 0 0 no-repeat;
}
ul.navi li:nth-child(2) {
 background:url(portfolio.png) 0 0 no-repeat;
}
ul.navi li:nth-child(3) {
 background:url(about.png) 0 0 no-repeat;
}
ul.navi li:nth-child(4) {
 background:url(access.png) 0 0 no-repeat;
}
ul.navi li:nth-child(5) {
 background:url(contact.png) 0 0 no-repeat;
}

いろいろなCSSセレクタを使ってテーブルをデザインする。

テーブルを角丸にして、奇数の順位の行だけ背景色をつけます。注意点は、border-collapse:collapseを指定しているとborderに対してのborder-radiusが効かなくなります。また、四隅に背景色がつく場合にはbackgroudに対してそれぞれth,tdにborder-radiusを指定しなければならないためcssの記述が多くなってしまうのが難点。

	FIFA World Ranking	Pts
1	Spain	1564
2	Netherlands	1365
3	Germany	1345
4	Uruguay	1309
5	England	1173


    
      
        
        FIFA World Ranking
        Pts
      
    
    
      1
      Spain
      1564

.rank {
 border-spacing:0;
 border:#ccc 1px solid;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
}
.rank th:first-child {
 -moz-border-radius: 10px 0 0 0;
 -webkit-border-radius: 10px 0 0 0;
 border-radius: 10px 0 0 0;
}
.rank th:last-child {
 -moz-border-radius: 0 10px 0 0;
 -webkit-border-radius: 0 10px 0 0;
 border-radius: 0 10px 0 0;
}
.rank tr:last-child td:first-child {
 -moz-border-radius: 0 0 0 10px;
 -webkit-border-radius: 0 0 0 10px;
 border-radius: 0 0 0 10px;
}
.rank tr:last-child td:last-child {
 -moz-border-radius: 0 0 10px 0;
 -webkit-border-radius: 0 0 10px 0;
 border-radius: 0 0 10px 0;
}
.rank th, .rank td {
 padding:1em;
 border-top:#ccc 1px solid;
 border-left:#ccc 1px solid;
}
.rank th {
 border-top:0;
 background:#CCF;
}
.rank th:first-child, .rank td:first-child {
 border-left:0;
}
.rank tr:nth-child(odd) td {
 background:#eee;
}

当然のことながら、ie6,7,8はほぼ全滅ですが、これからの制作にはかかせないものになってくることは間違いないと思いますので、今のうちに慣れておいて損はないと思います。

[CSS] CSSセレクタの実用的な使い方を考えてみる