CSS get total number of elements

Question

is it possible to get the number of child elements in css? For example I want the last element to be 100% - (number of childs * 50px)

If there's no possibility in CSS3, can I do it with LESS or do I need JS

Answer 1

Update answer after comment clarifying its a table

You could use an actual table tag and make the last header th have width:auto while the rest have a fixed width. This is the normal way tables work and it will make it expand to fill the rest of the table..

If you have to use other tags, you could simulate a table by using the display:table, display:table-row and display:table-cell values..

<div class="table">
    <div class="headers">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</div>

with css

.table{
    display:table;
    width:100%;
}
.headers{
    display:table-row;
}
.headers div{
    width:50px;
    display:table-cell;
}
.headers div:last-child{
    width:auto;
}

Demo at http://jsfiddle.net/gaby/KSbXM/

---

Original Answer

You could use the :last-child selector..

For example

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

and

.container div{
   height:50px;
}

.container div:last-child{
   height:100%;
}

Answer 2

Unfortunately, there is no way in both CSS or LESS to do that. You can go with a JavaScript solution, which is fairly simple to implement.

Rough idea:

var allChildren = document.querySelectorAll('#myContainer > *');
var count = allChildren.length;

allChildren[count-1].style.width = 'calc(100% - '+ count * 50 +'px)';

Your specific problem (always better to post a specific problem!) can be solved easily with a HTML table:

HTML:

  <table>
    <tr>
      <td>1</td>
      <td>2</td>      
      <td>3</td>
      <td>last</td>
    </tr>
  </table>

CSS:

table {
  width:300px;
  border:1px solid red;
}

td {
  width:50px; 
  border: 1px solid blue;
}

td:last-child {
  width:auto;
}

DEMO: http://jsbin.com/eTeBudiR/1/edit

If the data you want to display is not tabular in nature and you just want the layout to look like that, you can use CSS (display:table, display:table-cell) to achieve the same result.

HTML:

  <div id="myContainer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>last</div>
  </div>

CSS:

#myContainer {
  display:table;
  width:300px;
  border:1px solid red;
}

#myContainer > div {
  display:table-cell;
  border:1px solid blue;
  width:50px;
}

#myContainer > div:last-child {
  width:auto;
}

DEMO: http://jsbin.com/eTeBudiR/2/edit

Answer 3

You do need JavaScript to get the number of elements or any other information about the displayed html. There is currently no way to do this with css and due its design there might never be .

last:child is an option, as others mentioned. You could somehow combine it with setting a relation to the parent-height (or width?). But there would be more information needed.

EDIT:

table {
   width: 1000px; /* or whatever you want it to be */
}
td{
   width: 50px;
}
td:last-child{
  width: auto;
}

http://codepen.io/johannesjo/pen/KLcrA

Answer 4

You may try something from this.

.t1{
    counter-increment : test 1;
    background-color:red;

}
.t1:after{    
    content : counter(test);
    width : calc(counter(test)*50px);
}

working demo here