setting padding depending on number of child elements

Question

I have a DIV element which may contain 1 or 2 Child DIVs

Is there a way to say of there is 1 Child element then the padding should be 15px otherwise 5px

It may like

<div class="container">
   <div><strike>7.00</strike></div>
   <div>5.00</div>
</div>

or

<div class="container">
   <div>7.00</div>
</div>

you can change the propieties of the child if there is only one with `:only-child ` pseudo-class. If you want change `.container` you can`t with CSS — , Jun 29 '16 at 11:14

score 1 · Accepted Answer · 2016-06-29T11:23:03.853

You can do a trick using margin in the children to get the same effect:

.container div:only-child {
  margin: 15px;
}

div {
  border: solid 1px red;
}

div div {
  margin: 0 5px;
  border-color: green;
  background: #ccc;
}

div div:first-child {
  margin-top: 5px
}

div div:last-child {
  margin-bottom: 5px
}

<div class="container">
  <div><del>7.00</del></div>
  <div>5.00</div>
</div>


<div class="container">
  <div>7.00</div>
</div>

PS Use del tag instead strike that is deprecated

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

No, there is not.

CSS does have some complex quantity queries but these will only style the children based on their number.

It is not (currently) possible to style the parent based on the number of children as there is no Parent Selector

edited May 23 '17 at 11:58

Community

1
1

answered Jun 29 '16 at 11:17

Paulie_D

107,962
13
142
161

score 0 · Answer 3 · answered Feb 15 '21 at 16:41

0

Based on how old this original thread is I'm not providing exact solutions, however, CSS Tricks put a great article together covering Logical CSS styling. You can find the article here.

answered Feb 15 '21 at 16:41

Andrew K

147
9

setting padding depending on number of child elements

3 Answers3