CODEWITHSUNDEEP
htmlcss
Sebastian Witeczek
Sebastian Witeczek

Reputation: 133

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

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>

Upvotes: 2

Views: 1671

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76434

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.

Upvotes: 0

Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

-> 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>

Upvotes: 2

Related Questions