하위 요소를 기반으로하는 스타일 부모 요소

Question

타임 라인을 만들고 있는데 여기에는 특정 이벤트 시간에 대시 테두리가 필요합니다. 하지만 두 가지 스타일을 함께 결합 할 수는 없습니다.

간단히 말하면, 점선 테두리가 필요한 공용 클래스가있는 몇 가지 예외를 제외하고 대부분의 타임 라인 이벤트에는 단색 테두리가 필요합니다. 나는 지금까지 다음 코드를 가지고있다.

이벤트 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>