Change parent div style if more than two childs are available (CSS only)

Question

I want to use one class like .outer for both divs, but with different style for the parent element if there are more then two childs.

Please see the attached example.

.outer1{
    border: solid 6px #f00;
}

.outer2{
    border: solid 6px #ccc;
}

<p>More than two childs:</p>

<div class="outer1">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</div>

<p>Just two childs:</p>
<div class="outer2">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>

this can help you http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has — Alexis, Feb 13 '17 at 10:32
In CSS, you can't go backward. So there is no way to apply style for parent based on its children properties. You'll have to apply style for the children or use JS. — Hp93, Feb 13 '17 at 12:31

score 2 · Accepted Answer · answered Feb 13 '17 at 12:24

-> Please attache this code. -> Whenever you want to apply the commaon class name in the two or more elements than you have to first count the number of common class in which you want to change the design. -> .class-name:nth-child(number of class number) -> Please find the following example

.outer:nth-child(1) {
    border: solid 6px #f00;
}
.outer:nth-child(2) {
    border: solid 6px #ccc;
}

<div class="outer">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>
<div class="outer">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>

Incorrect. There is no way to know how many child will the first or second outer have in advance, and there is no way to know wether there will be other children. — Lajos Arpad, Feb 13 '17 at 12:26

score 0 · Answer 2 · answered Feb 13 '17 at 12:25

As far as I know this is impossible with CSS only, since it would involve the selection of a parent. You can select the n'th child of a tag, but you cannot go back to the tag from the n'th child. One way would be to select the nth-child(3) and change its parent's background color.

Change parent div style if more than two childs are available (CSS only)

2 Answers2