2

1 つ、2 つ、または 3 つのサブ要素を含む要素があります。

<div class="wrapper">
  <div class="element" />
</div>

また...

<div class="wrapper">
  <div class="element" />
  <div class="element" />
</div>

また...

<div class="wrapper">
  <div class="element" />
  <div class="element" />
  <div class="element" />
</div>

兄弟の数に応じて .element にスタイルを適用したい。

たとえば、次のようなもの...

.wrapper .element {
width: 50%;
}

.wrapper .element:only-child {
width: 75%;
}

...しかし、2 つの要素と 3 つの要素を区別する方法がわかりません。これは純粋なcssで可能ですか?

（事前に）ご協力いただきありがとうございます。

4

1 に答える 1

0

これは実際には非常に簡単に行うことができます。通常、人々はこれを達成するために html で data 属性 [thanks @david-thomas] を使用します:

DIV ラッパーと子:

<div class="wrapper" data-wrapper-subs="3">
    <div class="some-class">Child 1</div>
    <div class="some-class">Child 2</div>
    <div class="some-class">Child 3</div>
</div>

そしてそのCSS：

div.wrapper[data-wrapper-subs="1"] div { width: 99%; }
div.wrapper[data-wrapper-subs="2"] div { width: 49%; }
div.wrapper[data-wrapper-subs="3"] div { width: 32%; }
div.wrapper[data-wrapper-subs="4"] div { width: 24%; }
div.wrapper[data-wrapper-subs="5"] div { width: 19%; }

div.wrapper div.some-class { /* Generic child styling */ }

重要なことは、data-wrapper-subsを子供の数に設定することです。

明らかに子供の数がわからない場合、これは機能しませんが、私の知る限り、 :first-child, :last-child, :only-child, :nth-child(odd )、:nth-child(偶数) および :nth-child([数値])

于 2013-05-31T18:35:07.447 に答える