style parent element based on child elements

Question

I'm creating a timeline and for this I need a dashed border for certain event times. But I can't combine the two styles together.

To put it simply, I need a solid border for most of the timeline events except a few, which have a common class, where I need a dotted border. I have the following code till now.

I need the border between the Break event till Event 4 to be dotted instead of solid. Any CSS/JS based solution would do.

.timeline {
  border-left: 4px solid #a5a5a5;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(0, 0, 0, 0.8);
  font-family: "Source Sans Pro", sans-serif;
  margin: 0 auto 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 30px;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
}

.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .event:before {
  left: -170px;
  color: rgba(0, 0, 0, 1);
  content: attr(data-date);
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  min-width: 120px;
}
.timeline .event:after {
  box-shadow: 0 0 0 4px #a5a5a5;
  left: -37.85px;
  background: #313534;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 5px;
}

.timeline .event {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 25px;
  position: relative;
}

<ul class="timeline ">
                <li class="event" data-date="09:30 - 10:00 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Event 1</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li class="event" data-date="10:00 - 10:30 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Event 2</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li class="event break" data-date="10:30 - 11:00 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Break</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li class="event" data-date="11:00 - 11:30 ">
                    <div onclick="document.getElementById('id01').style.display='block'">
                        <h3 class="event-title">Event 4</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>

Answer 1

You should change your approach

Try this:

.timeline {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(0, 0, 0, 0.8);
  font-family: "Source Sans Pro", sans-serif;
  margin: 0 auto 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 30px;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
}

.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .event:before {
  left: -160px;
  color: rgba(0, 0, 0, 1);
  content: attr(data-date);
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  min-width: 120px;
}

.timeline .event:after {
  box-shadow: 0 0 0 4px #a5a5a5;
  left: -8px;
  background: #313534;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 5px;
}

.timeline .event h3 {
  margin-top: 0px;
}

.timeline .event {
  border-left: 4px solid #a5a5a5;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  padding-bottom: 0px;
  padding-left: 40px;
  position: relative;
}

.timeline .break {
  border-left: 4px dotted #a5a5a5;
}

<ul class="timeline ">
  <li class="event" data-date="09:30 - 10:00 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Event 1</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="event" data-date="10:00 - 10:30 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Event 2</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="event break" data-date="10:30 - 11:00 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Break</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="event" data-date="11:00 - 11:30 ">
    <div onclick="document.getElementById('id01').style.display='block'">
      <h3 class="event-title">Event 4</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>