How to Get the Number of Children Div in CSS or SASS

Is it possible to determine number of children of any container using any SASS function?

What you want is to know how many childs haves an element and set the right class to it.
You need Javascript to detect the number of childs, HTML and CSS.

SCSS

.element {
  $width: 100%;
  width: $width;

  div {
    height: 100px;
    float: left;
    border:1px solid #000;
    box-sizing: border-box;
  }

  @for $i from 1 through 12 {
    &--#{$i} div {
      width: $width/$i;
    }
  }
}

var element = document.getElementsByClassName('element')[0];var childs = element.childElementCount;element.classList.add("element--"+childs);

.element {  width: 100%;}.element div {  height: 100px;  float: left;  border: 1px solid #000;  -webkit-box-sizing: border-box;          box-sizing: border-box;}
.element--4 div {  width: 25%;}

<div class="element">  <!-- childs -->  <div></div>  <div></div>  <div></div>  <div></div></div>

Can CSS detect the number of children an element has?

Clarification:

Because of a previous phrasing in the original question, a few SO citizens have raised concerns that this answer could be misleading. Note that, in CSS3, styles cannot be applied to a parent node based on the number of children it has. However, styles can be applied to the children nodes based on the number of siblings they have.

---

Original answer:

Incredibly, this is now possible purely in CSS3.

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

The trick is to select the first child when it's also the nth-from-the-last child. This effectively selects based on the number of siblings.

Credit for this technique goes to André Luís (discovered) & Lea Verou (refined).

Don't you just love CSS3? /p>

CodePen Example:

• https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

Sources:

• http://andr3.net/blog/post/142 (André Luís)
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)

Select only direct children from element with Sass

Try this:

    ...
    & > div {width: 33%;}

    div {
      float: left;
      height: 4.1rem;
      line-height: 4.1rem;
      color: #fff;
      ...

Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).

Please edit your question and better explain what exactly you want to achieve.

how to calculate child property based on parent property in sass

Yes, but neither with CSS or Sass, since Sass is based on CSS and the latter does not support conditional statements (yet). You will have to use Javascript instead.

You can however apply a certain styling to a descendent if a certain selector matches the parent.

// HTML

<div class="red">
  Parent
  <div>
    Child
  </div>
</div>

// SCSS

.red {
  background-color: red;
  
  > div {
    color: green;
  }
}

https://codepen.io/LudwigGeorgImmanuel/pen/abmPJmZ

CSS / SCSS - Access child of child element with unknown child type

Specifying the root element and just leaving a space means descendant, so

.some-class i {
    color: grey;
 }

should do what you want.

---

If you want to only style them if they are at least one level deeper than the root then use * which means any tag.

 .some-class * i {
    color: grey;
 }

---

Finally, if you want to target them at specifically the third level use

  .some-class > * > i {
    color: grey;
 }

Is it possible to use child index in calc in CSS?

NOTE: This answer does NOT use basic CSS, but rather shows an example of using a SASS @for loop to avoid handwriting each rule. If OP does not have GULP or another way to compile the SASS/SCSS, there are online compilers such as SassMeister or using CodePen, changing the settings on the CSS box to add a preprocessor:

And then viewing the compiled CSS:

@for $i from 1 to 12 {
    .parent > div:nth-child( #{$i}) {
        background-color: rgb($i * 20, 255, 255);
    }
}

You can enter the total number of children as the last value (the 12 in this example. This will output:

.parent > div:nth-child(1) {
  background-color: #14ffff;
}

.parent > div:nth-child(2) {
  background-color: #28ffff;
}

.parent > div:nth-child(3) {
  background-color: #3cffff;
}

.parent > div:nth-child(4) {
  background-color: #50ffff;
}

.parent > div:nth-child(5) {
  background-color: #64ffff;
}

.parent > div:nth-child(6) {
  background-color: #78ffff;
}

.parent > div:nth-child(7) {
  background-color: #8cffff;
}

.parent > div:nth-child(8) {
  background-color: #a0ffff;
}

.parent > div:nth-child(9) {
  background-color: #b4ffff;
}

.parent > div:nth-child(10) {
  background-color: #c8ffff;
}

.parent > div:nth-child(11) {
  background-color: #dcffff;
}

---

Related Topics