• css3

    セレクタ②

    2012/10/29

    特定の子要素と一致させるセレクタ

    うさこちゃん

    前回に引き続き

    セレクタ第二弾は、特定の子要素と一致させる疑似クラス!です。


    最後の子要素と一致させる

    css2で:first-child(最初の子要素)がありましたが、その逆です。

    同じ親要素をもつ子要素の中で、最後の子要素に適用されます。


    
    :last-child
    
    

    • ・liリスト
    • ・liリスト
    • ・liリスト
    
    li:last-child{
      font-weight:bold;
      color:#f00;
    }
    
    


    前から一定の個数おきで一致させる

    同じ親要素を持つ兄弟要素の中で前からカウントします。


    
    :nth-child()
    
    

    • ・リスト01
    • ・リスト02
    • ・リスト03
    • ・リスト04
    • ・リスト05
    • ・リスト06
    • ・リスト07
    • ・リスト08
    
    li:nth-child(odd){
      font-weight:bold;
      color:#f00;
    }
    
    

    同じ親要素(ul)をもつ兄弟要素liの奇数行にスタイルを適用しました。

     

    書き方としては以下のようなものがあります。

    
    要素:nth-child(odd) /*奇数*/
    要素:nth-child(2n+1) /*奇数*/
    要素:nth-child(even) /*偶数*/
    要素:nth-child(2n+0) /*偶数*/
    要素:nth-child(3n) /*3の倍数*/
    要素:nth-child(8) /*8番目*/
    
    


    後ろから一定の個数おきで一致させる

    同様に後ろからカウントすることもできます


    
    :nth-last-child()
    
    


    同一要素で前から一定の個数おきに一致させる

    同じ親をもつ同じ要素の兄弟要素の中で、前からカウントします。

    
    :nth-of-type()
    
    

    p要素

    div要素

    p要素

    div要素

    p要素

    div要素

    p要素

    div要素
    
    div:nth-of-type(even){
      font-weight:bold;
      color:#f00;
    }
    
    

    同じ親(div)を持つpとdivが並んでいます。
    その中でdiv要素にしぼってカウントし、前から偶数行のdiv要素にスタイルを適用させました。



    同一要素で後ろから一定の個数おきに一致させる

    同様に後ろからカウントすることもできます

    
    :nth-last-of-type()
    
    


    同一要素で最初に出現する要素に一致させる

    同じ親要素を持つ同じ要素の兄弟要素の中で、最初の要素に適用する。

    むむっ!ちょっとややこしくなってきました。


    
    :first-of-type
    
    

    p要素

    span要素

    p要素

    span要素
    
    span:first-of-type{
      color:#f00;
      font-weight:bold;
    }
    
    

    同じ親を持つpとspanの中で最初に出現したspan要素にスタイルを適用させました。
    これは:nth-of-type(1)と同じ結果ですね!



    同一要素で最後に出現する要素に一致させる

    同様に最後に出現する同一要素に適用することもできます
    nth-last-of-type(1)と同じ結果です。

    
    :last-of-type
    
    


    1つだけの子要素に一致させる

    その要素が唯一の子要素の場合に適用させます。

    
    :only-child
    
    

    div親 span子供 span子供
    div親 span子供
    
    span:only-child{
      color:#f00;
      font-weight:bold;
    }
    
    

    注意しないといけないのは、他の兄弟要素も含め子要素がひとつしかない場合に適用されるということです。
    んー、ややこしいですね。
    つまり、その要素が親要素に対して「ひとりっこ」の場合にのみ適用されます。



    同一要素で1つだけの子要素に一致させる

    その要素が兄弟要素の中でひとつしかない場合に適用されます。
    またまたややこしい!

    
    :only-of-child
    
    

    div親 span子供 span子供
    div親 span子供 italic子供
    
    span:only-of-child{
      color:#f00;
      font-weight:bold;
    }
    
    

    上の:only-childは「ひとりっこ」の場合と説明しましたが
    これは「その要素がひとりっこ」の場合になります。



    子要素がない親要素に一致させる

    子要素がない要素に適用されます。子要素というか、中身が空の要素ですね。
    テキストが入っている場合は適用されません。( もだめ!)

    
    :empty
    
    


    特定の子要素を指定するセレクタでした。

    nth-childなどはかなり使えるのでチェキ!した方がいいですね!


    【CSS3】セレクタ③に続く

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back