Design the parent element according to the child elements

I'm currently working on a timeline project and I am facing an issue with combining different border styles for specific event times. The main challenge is to have a solid border for most of the timeline events, except for a few instances that share a common class where a dotted border is needed. Here is the code snippet I have so far.

Specifically, I would like the border between the Break event and Event 4 to be displayed as dotted instead of solid. I am open to any CSS/JS solution that could help achieve this.

.timeline {
  ...CSS styles here...
}

.timeline .event:before,
.timeline .event:after {
  ...additional CSS styles...
}
...more CSS code...

<ul class="timeline ">
                <li class="event" data-date="09:30 - 10:00 ">
                    <!-- Event 1 HTML -->
                </li>
                <li class="event" data-date="10:00 - 10:30 ">
                    <!-- Event 2 HTML -->
                </li>
                <li class="event break" data-date="10:30 - 11:00 ">
                    <!-- Break event HTML -->
                </li>
                <li class="event" data-date="11:00 - 11:30 ">
                    <!-- Event 4 HTML -->
                </li>

javascriptjqueryhtmlcsstimeline

Answer №1

You might want to consider adjusting your current strategy

Give this a try:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain an array containing only the specific values of each object

Currently, I have the following code snippet: <db.collection>.find({ id : { $exists: true } }) This query retrieves all documents containing an id property. However, I am interested in transforming this result into an array that contains only the va ...

javascriptnode.jsmongodbmongoose

Utilize Google Spreadsheet to choose a specific worksheet using JSONP

Exploring the First endpoint I have been delving into the details of the Google query language specification . When trying to select a specific page, I encountered some challenges. How can one select a page through this endpoint? I attempted the followin ...

jquerygoogle-sheetsgoogle-sheets-api

Problem with Google+ Button Alignment

I arranged my social media buttons in a row - Twitter, Facebook & Google+. The issue is that the Google+ button is not aligning properly. It appears to be spaced out about 3 times further than the Twitter and Facebook buttons. I attempted adjusting the p ...

htmlcssbutton

What is the significance of a listener signaling an asynchronous response with a return of true, only to have the communication channel close before the response could be received?

Currently, I am developing a React application that involves the use of various npm modules. One of these modules is a self-built NPM package called modale-react-rm (available at this link). This package serves as a simple modal component that utilizes the ...

javascriptreactjsnpm

Exploring the Potential of Mobile Development using AngularJS

I am in the process of creating an app with the following key design objectives: Efficiency and modularity - a light core that can be expanded to create a feature-rich app in a cohesive manner Mobile focus - this app is primarily aimed at mobile platform ...

javascriptangularjstwitter-bootstrapcordova

Troubleshooting an issue in Chrome with animating the "d" value using Snap.svg

To uncover the issue, try opening in both Chrome and Safari browsers. The logo animation should animate one section at a time like it does in Safari, but in Chrome, the animation seems to freeze. Check out the Snap.svg function responsible for running th ...

javascriptgoogle-chromesvgsafarisnap.svg

I am searching for a way to apply a conditional class to the chosen element in react, as the toggle method does not

I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu. Her ...

javascriptcssreactjsreact-typescript

Exploring the Interaction of Users with HTML Table Cell <td>

I am currently analyzing the code for a web page. Within this code, users have the ability to double-click on a cell in a table (<td> as shown below) and input a value. Is there a specific attribute or element within this HTML that indicates user in ...

javascripthtmlhtml-table

Methods for adding a new object to an array in Angular: Explained

How can I insert a new object in Angular? Here is the current data: data = [ { title: 'Book1' }, { title: 'Book2' }, { title: 'Book3' }, { title: 'Book4' } ] I would like to update the obje ...

javascripttypescript

ReactJs - Organize your data with the sort method

In my React application, I have a table that fetches its data from an API. I need to implement sorting for one of the columns. The values in this column are usually strings of numbers but sometimes can be equal to "-" (Dash). Below is the sort function I ...

javascriptsortinghtml-tablecharacter-encoding

Ajax is functional, however the server is not responding

After many attempts to resolve the issue with my website, I am turning to this community in hopes of finding a solution. The problem lies in the fact that while the ajax success function appears to be working and shows a status code of 200 in the network ...

javascriptphpajaxdatabasexmlhttprequest

Adjust the height of the image without altering its width

I've encountered an issue with my responsive design. While all elements adjust properly when resizing the height and width of the browser, the background image only changes when I resize the height. When I resize the width, it remains the same. Origi ...

htmlcssresponsive-design

Storing a variable in jQuery using AJAX and retrieving it at a later time

Hey there! I'm currently using jQuery and AJAX to fetch the user ID of the logged-in user. I'm storing this information in a variable so that I can use it for some logic later on. However, I'm facing issues with accessing it. Here's my ...

javascriptjqueryajaxglobal-variables

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

htmlcsshtml-table

Add a 'tag a' directly following 'img'

Check out this code snippet: <a href="#" class="list-group-item"> <span class="badge"><?=$st ?></span> <img class="small_profile_pic" src="<?=$pic ?>" /> aaa<a ...

htmlimage

Difficulty loading AJAX with autocomplete feature. Any suggestions?

I have created a jQuery autocomplete feature that works correctly, but when the value is removed using the Backspace key, the 'LOADING...' message remains visible instead of hiding. How can I make it so that after removing the value with the Back ...

javascriptjquery

several tables all set to the identical TD width

Using a css sheet, I have formatted two tables. The first table is used for filter/sort selection, while the second table is a scrollable data table. div#scrollTableContainer { width: auto; margin: 20px; /* just for presentation purposes * ...

htmlcsshtml-table

How do I programmatically switch the Material-UI/DatePicker to year view in React?

I have a DatePicker component set up in my project, and it works perfectly fine. However, for my specific use case, I only need the year view to be displayed. Within the child component of the DatePicker (Calendar), there is a function called: yearSelect ...

javascriptreactjsdatepickermaterial-designmaterial-ui

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

cssreactjsmaterial-ui

Preparing the format/serialization of a JQuery JSON array prior to submitting it

Looking at the JSON structure I have: { "firstArrayOfJSON": [ { "something" : "something" }, { "another" : "another" }, { "secondArrayOfJson" : [ ...

javascriptjqueryarraysajaxjson