How to change the color of a div Parent relative to the size of the Childs

Question

I have a div parent and 4 div's child and would like to change the color of border of div parent relative to the size of div child. To exclaim better put down an image with an example of what I speak.

The pink and red colors are just to illustrate the size of the divs child and the border on the left belongs to div parent. I would like you to answer me at jquery.

Edit:

Follow the requested code. It is the border gray of div parent I want to change the color with the size of your divs child.

$(".timeline").css({
	"border-left" : "5px solid lightgray",
	"padding-left" : "10px"
}).children().css({
	"margin-bottom" : "5px",
	"padding" : "5px",
	"border" : "2px solid black"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline">
	<div>
		<bold name="10 3 2017 9:10">Block 1 </bold>
	</div>
	<div>
		<bold name="10 3 2017 10:30">Block 2 </bold>
	</div>
	<div>
		<bold name="10 3 2017 12:30">Block 3 </bold>
	</div>
	<div>
	    <bold name="10 3 2017 13:50">Block 4 </bold>
	</div>
</div>

Edit 2:

The second div starts then ends the margin.

Answer 1

Interesting functionality!

You could do it like this:

const divs = [].slice.call(document.querySelectorAll('body > div'));
// máximo de children
const max = Math.max.apply(Math.max, divs.map(div => div.children.length));

divs.forEach(div => {
  div.style.borderColor = `rgba(255, 0, 0, ${div.children.length / max})`;
});

div {
  border: red 2px solid;
  padding: 10px;
  background-color: #eee;
  margin: 5px;
}

div > p {
  display: inline-block;
}

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
</div>
<div>
  <p>1</p>
</div>
<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<div>
  <!-- nada -->
</div>

The idea is to use the opacity of rgba. Knowing the div who has more descendants we can do the math between 0 and 1

Answer 2

Use css to do this.
let your divs from within the class .timeline with position: relative

div.timeline > div {
  position: relative;
}

and with a pseudo elemento ::after or ::before Voce can make a 'fake' border and style it as you like and css

div.timeline > div::before {
  content: '';
  width: 5px;
  height: 135%;
  background-color: #000;
  position: absolute;
  left: -17px;
  top: -2px;
}

Look at this Jsfiddle I did as an example.