[CSS]nth-child()の実装

例えばこういう形のXMLデータがあったとします。
//サンプルXML

ラベル



データを指定するときは大抵

//idやclassを指定して、レイアウトを決定する
#div_title {
/*div範囲をwidth:400pxに指定*/
width:400px;
}


と、定められたidに対して指定したり、inputやradioなどの属性を指定してそのレイアウトを書き込みます。

しかしこのサンプルにはdiv_titleの中に指定のないdivが含まれています。

この指定のないdivを指定するためには、nth-childというもの利用します。
//idのついたdivの中にある無指定のdivを指定する
#div_title div:nth-child(1){
/*div範囲をwidth:400pxに指定*/
width:400px;
}


その他、数字の部分に複雑な指定を施すことができます。
参考URL:
CSSの「:nth-child」をマスターするための図解いろいろ
nth-child() 疑似クラスを試してみる
このエントリーをはてなブックマークに追加

tag : css

コメントの投稿

非公開コメント

Translation


プロフィール

チーズくん

Author:チーズくん
個人的メモをただ羅列しています。
twitter:@cheese1038

バロメーター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ