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

Tips for personalizing the react-select module

I'm struggling with customizing the appearance of the react-select component. The official documentation lists all the style attributes that can be modified, but I'm having trouble removing the blue borders around the text and container. https:/ ...

cssreactjsnext.jsstylesreact-select

Tips for extracting information from a JSON file using $routeParams in AngularJS

https://i.stack.imgur.com/NQCpy.png I am currently encountering an issue with retrieving data using $routeparams. Here is a description of my problem: Retrieving the URL to redirect console.log($routeParams); console.log($routeParams.json_url); $.getJS ...

javascriptjqueryangularjsjson

What is causing find_by_css to return nothing when using nth-child?

Currently, I am facing an issue when trying to extract the "href" link from the following HTML code: https://i.stack.imgur.com/Gtzf4.png This is the code that I'm using: from selenium import webdriver from splinter import Browser from bs4 import Be ...

pythoncsspython-3.xseleniumbeautifulsoup

Exploring the use of the Next.js page router for implementing internationalization (i18

I need assistance implementing Dutch and English language translations for my entire website. Can anyone provide guidance? I have tried using i18n localizely, but it only works for individual pages. I am looking to implement translations on a larger scale ...

javascriptnext.jsinternationalizationnext.js13

Refresh a table using jQuery Mobile, PHP, and AJAX without having to reload the entire page by clicking a

Currently, I am working on a web app that includes a pop-up feature. When the user clicks on the pop-up to close it, I want the table data to refresh without having to reload the entire page. This pop-up allows users to modify existing data in the table. A ...

javascriptphpajaxjquery-mobile

GAE does not have access to background images

Having trouble loading background pictures in my GAE front-end app. "Failed to load resource: the server responded with a status of 404 (Not Found)". My app is a simple website, no GAE backend. Using Eclipse with Google AppEngine Plugin. Background pict ...

jquerycssimagegoogle-app-engine

TypeScript Yup schema validation combined with the power of Type Inference

I currently have a unique data structure as shown below: type MyDataType = | { type: "pro"; content: { signedAt: string; expiresOn: string }; } | { type: "default" | "regular"; content: { signed ...

javascriptnode.jstypescriptyup

Transmitting a plethora of information using jQuery

Here's the code I currently have for sending data: var test={imagename:"apple.jpg",x:"13",y:"33"}; $.ajax({ type: "POST", url: "some.php", data: test, success: function(response){ console.log(response); } }); ...

phpjavascriptjqueryjson

How can HTML5 geolocation be utilized to provide real-time latitude and longitude coordinates for integration with the Google Maps API?

I am currently working on a project where I need to dynamically fetch longitude and latitude values from the browser geolocation and then include them in the options array for the Google Maps API. Here is the code snippet I am using: function initMap(){ ...

javascriptgoogle-mapsgoogle-maps-api-3geolocation

Overflowing HTML Table Spills Over into Neighboring Div

Is there a way to make the data in a table that spans across multiple pages overflow into a separate div on the initial page without using JavaScript since I am generating it as a PDF? See the images below for reference. Current layout: https://i.stack.im ...

htmlcsshtml-tableoverflow

Disable the scroll animation feature for certain IDs

I implemented JavaScript code to animate scrolling for each block with a specific ID. However, when I added Bootstrap's tabs, the animation interfered with the functionality of the tabs. Is there a way to disable the scroll animation specifically for ...

javascriptjquerytwitter-bootstrapanimationscroll

Populating a form within an Angular.js application using PhantomJS

Looking to test an AngularJS application using PhantomJS? The first step is to fill in the login form with the username field, assuming there are no other fields involved. Typically, in a real browser, this field is managed by Angular (with the ng-model ...

javascriptangularjsformstestingphantomjs

Embracing the beauty of incorporating nested quotations

I've been experimenting with jquery's append functions lately. I'm adding a substantial amount of html, specifically a button with an onclick event function. It might sound complicated, but due to some technical restrictions, this is my onl ...

javascriptjquery

Utilizing Zoomdata data in conjunction with echarts index.js to create a dynamic stacked line chart

I am currently working on integrating Zoomdata with an echarts javascript chart to visualize data from 20 different computers in a stacked line chart format. While I can manually code this setup, I am looking for a way to dynamically link the data from Zoo ...

javascriptecharts

What is the best way to obtain a user's ID on the server side?

I'm currently working on a node.js application using express and I am in need of retrieving the user ID. I would like to have something similar to "req.userID" so that I can use it in the following way: var counter=0; var user = new Array(); router.g ...

javascriptnode.jsexpressserveruser-management

Attempting to utilize jQuery for altering the background URL leads to the unexpected removal of the -webkit-background-clip:text; effect

Can the -webkit-background-clip:text; effect be preserved when using jQuery to switch the background url? I am experiencing issues where changing the URL removes the text clipping effect. jQuery(function($) { var whatToSwitch = $('.homepage_ove ...

htmljquerycss

Learn how to easily copy the success result from an Ajax call to your clipboard

Is there a way to use an ajax method to retrieve data from a controller and display it in a JQuery Dialog Box? I want to add a button within the dialog box that allows the user to easily copy the data with a single click, instead of having to manually high ...

javascriptjqueryajaxclipboard

What is the best way to send props to a React component?

Sorry for the inconvenience of asking for help with finding an issue in my code, but I'm facing challenges while learning React. I am attempting to pass a variable named hashRoute to a component in react. However, every time I try to access the prop ...

javascriptreactjs

Accessing a JSON file from AWS S3 using Node.js

I was able to successfully read a JSON file stored in my S3 bucket, but I found myself having to perform various transformations that are somewhat unclear to me. When logging the data as it arrives, I am seeing an output of Buffer data s3.getObject(objPar ...

javascriptnode.jsjsonamazon-s3

Challenge encountered with numerous checkboxes

Disclosure: My experience with jQuery is limited to just one week, and I have been working with HTML/CSS for two weeks. I recently implemented a form on my website that includes checkboxes and text input fields. The main checkbox, #ship_to_billing, contro ...

jquerycheckbox