私は持っている:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
各liに異なる幅を追加したい。
私はインラインでそれをしたくありません。
CSS2 (CSS3 ではない) を使用して各 li をターゲットにするにはどうすればよいですか?
各liにクラス名を付ける方法はありますか?
ありがとう
私は持っている:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
各liに異なる幅を追加したい。
私はインラインでそれをしたくありません。
CSS2 (CSS3 ではない) を使用して各 li をターゲットにするにはどうすればよいですか?
各liにクラス名を付ける方法はありますか?
ありがとう
nth-of-type を使用しない理由
ul li:nth-of-type(1){} /* First */
ul li:nth-of-type(2){} /* Seconds */
また、古いブラウザーが心配な場合は、CSS3 疑似クラスを追加する優れたライブラリーがあります。
CSS2 の唯一の方法は、各 LI にクラスを追加することです。
編集
実際には、LI ごとに異なるクラスだけが CSS2 の方法ではありません。元の質問に対する@Hashem Qolamiのコメントには、適切なCSS2ソリューションがありますが、彼が言うように、少しばかげています。
CSS e:g-の各liにクラスを追加する必要があるため、comb cssを使用することもできます
li {}
li + li {}
li + li + li {}
li + li + li + li {}
li + li + li + li + li {}
純粋な CSS2 を使用する場合は、それらにクラス名を付ける必要があります。:nth-of-type()
これは疑似クラス セレクターで実現できますが、これは CSS3 の機能です。
これは、jQuery でも非常に簡単に実行できます (CSS3 への依存を避けたいが、マークアップにクラス名を追加したくない場合)。これには、(CSS クラスとしてプロパティ値をハードコーディングするのではなく) 必要に応じて幅を動的に変更できるという利点もあります。
「各リー」とは、各リー要素を個別に意味しますか? もしそうなら、n 番目のセレクターがあなたの友達かもしれませんが、それは CSS3 です。
float を使用して、すべての li にクラス名を付けて表示ブロックに設定できます。
サンプルフィドル:
li{
display:block;
float:left;
background:blue;
}
li.small{
width:50%;
}
li.big{
width:100%;
}