子エレメントに基づくスタイル親エレメント

Question

タイムラインを作成しています。このために、特定のイベント時刻に破線の枠線が必要です。しかし、私は2つのスタイルを組み合わせることはできません。

単純に言えば、私は点線の境界線が必要な一般的なクラスを持つ少数を除いて、ほとんどのタイムラインイベントでは堅い境界線が必要です。私は今まで次のコードを持っています。

イベント4がソリッドではなくドットで表示されるまで、ブレークイベント間に境界線が必要です。どのCSS/JSベースのソリューションでも可能です。

.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

あなたは

はこれを試してみてくださいあなたのアプローチに変更する必要があります

.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>