Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications?

I attempted to add a class called .not_complete to one of the timeline containers, but it did not alter the circle's color as intended.

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 5em;
}

/* The actual timeline (the vertical ruler) */
.timeline:before {
  content: '';
  position: absolute;
  width: 0px;
  background-color: #fff;
  top: auto;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #e3e3e3;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  right: -5px;
  background-color: #e3e3e3;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.container::after .not_complete {
  background-color: #e3e3e3 !important;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -7px;
}

/* The actual content */
.content {
  padding: 2px 3px;
  position: relative;
  border-radius: 6px;
}
<div class="timeline">
  <div class="container left not_complete">
    <div class="content">
      <p>
        <img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px">
      </p>
      <h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5>
      <div> Test Timeline Step 1</div>
    </div>
  </div>
</div>

htmlcss

Answer №1

The selector provided is incorrect:

.containerx::after .not_complete {

This would target the child of the ::after pseudo-element. The correct selector should be:

.containerx.not_complete::after {

The updated selector targets any element's ::after pseudo-element with the classes containerx and not_complete. Please replace your code with the following:

.containerx.not_complete::after {
  background-color: #e3e3e3 !important;
}

We hope this resolves your issue.

Complete Snippet

/* The actual timeline (the vertical ruler) */
.timelinex {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 5em;
}

/* The actual timeline (the vertical ruler) */
.timelinex:before {
  content: '';
  position: absolute;
  width: 0px;
  background-color: #fff;
  top: auto;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}


.timelinex::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #e3e3e3;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.containerx {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.containerx::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  right: -5px;
  background-color: #e3e3e3;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.containerx.not_complete::after {
  background-color: #e3e3e3 !important;
}


/* Place the container to the left */
.leftx {
  left: 0;
}

/* Place the container to the right */
.rightx {
  left: 50%;
}


/* Fix the circle for containers on the right side */
.rightx::after {
  left: -7px;
}

/* The actual content */
.contentx {
  padding: 2px 3px;
  position: relative;
  border-radius: 6px;
}
<div class="timelinex" >
  <div class="containerx leftx not_complete">
    <div class="contentx">
      <p><img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px"></p>
      <h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5>
      <div> Test Timeline Step 1</div>
    </div>
  </div>
</div>

Update: For Even / Odd Styling and First Child.

To create alternating styles for odd and even items, you can use the :nth-child() selector. Here's an example where odd elements are blue and even elements are red:

li {
  display: block;
  width: 200px;
  padding: 10px;
  color: #fff;
}
li:nth-child(odd) {
  background: #00f;
}
li:nth-child(even) {
  background: #f00;
}
li:first-child {
  background: #000;
  font-weight: bold;
}
<ul>
  <li>First Child</li>
  <li>Even</li>
  <li>Odd</li>
  <li>Even</li>
  <li>Odd</li>
</ul>

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

Styling in CSS is being applied to a button element within a React component,

Having trouble with a button styled with the className 'actions' The button displays the CSS styling from '.actions', but not '.actions button'. Both should be applied. This code snippet works for all elements ...

javascripthtmlcssreactjs

How can I show a tooltip when hovering over a tab using uib-tab?

Currently facing an issue with HTML/Bootstrap. My tabs are displayed using the uib-tabset directive on Angular Bootstrap (UI Bootstrap). I am trying to implement a tooltip that appears when hovering over a tab that is disabled. Does anyone know how I can a ...

javascripthtmlcssangularjstwitter-bootstrap

What is the best way to showcase a half star rating in my custom angular star rating example?

component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { projectRating ...

javascriptcssangular

The CSS float is positioned beneath the Bootstrap navigation bar

Having an issue with the menu bars in my Rails 4 app. Specifically, I'm struggling with two divs overlapping. The goal is to align the "Register" and "Log In" blocks with the left-hand side menu while floating right. It should not float slightly belo ...

csstwitter-bootstraptwitter-bootstrap-3

The animation for the Bootstrap modal is not functioning correctly

Whenever I click the button to open the modal window, it just pops up without any animation or fade effect. I attempted to add classes like .fade and .modal-fade to the modal, but nothing changed. You can see it in action on my test page. Simply click th ...

cssbootstrap-4bootstrap-modal

What is the best method for combining multiple text box values into a single text box?

I need assistance with concatenating multiple text box values into one dynamic text box. I am currently retrieving values using IDs, which are dynamically added as the text boxes are dynamically created. However, when using a for loop to dynamically add te ...

javascripthtml

Issues with simple jquery and javascript: unable to add the class ".has-error" and onclick event not properly defined

Currently, I am working with jQuery version 2.1.4 and JavaScript to implement a straightforward form validation using Bootstrap. During this process, I have encountered three peculiar issues. While I am confident that my jQuery code is properly functi ...

javascriptjquerycsstwitter-bootstrap

The JQuery click handler seems to only be functioning on the initial item

I am currently working on a table where I need to create a functionality that can change a value in the database for each row. However, I am facing an issue where the changes I make only affect the specific row in the table and not the rest of the rows. M ...

javascriptphpjqueryhtmlajax

What is the best way to adjust the size of a div element so that it is

I am facing an issue with a table that contains a TreeView within a cell. The code snippet is shown below: <style> #leftPanel { width:60px; height:'100%'; border:1px solid red; ...

javascriptjqueryhtml

The dropdown menu is extending outside the header in a right-to-left (RTL) direction

I have implemented the jQuery code below to prevent the dropdown from extending beyond the header area. It works perfectly in the normal LTR version. However, I need a solution for the RTL version. How can I achieve this? jQuery $('.primary-menu .dr ...

javascripthtmljquerycssbootstrap-5

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...

javascripthtmljqueryajax

Adjust the value based on selection

I aim to display another div when either the Full Time or Part Time option is selected. Additionally, I would like to calculate a different value for each option; if 'Part Time' is chosen, PrcA should change to PrcB. Here is the code snippet tha ...

javascripthtmlfunctionselect

How can we transfer parameters in JavaScript?

My vision may be a bit vague, but I'll try to explain it as best as I can. I want to implement multiple buttons that can toggle the visibility of a div (I have this functionality working already). Each button should carry two values (a number and a l ...

javascriptjqueryhtml

What could be causing my closing tag to abruptly end the section tag?

I encountered an issue that says the 'section' is closed by another tag. Upon reviewing my HTML code, everything appears to be correct. <ng-container *ngIf="display$ | async as display"> <section [class.open]="display ...

htmlangular

Discovering the differences between input values in HTML when using scripts

I have a code snippet here for an HTML project. The code includes an input field for username and password. I am looking to compare the user's input with a specific value using JavaScript. My question is, what code should be included in the button cli ...

javascripthtmlif-statement

What is the method of obtaining the file name of the current template within a Jinja2 template?

If I have a code snippet like return render_template('index.html', users=users), is there a way to access the filename within the template without having to pass it explicitly from the view? ...

pythonhtmljinja2

Incorporating a hyperlink within a list item for an image

Currently, I am attempting to create a clickable image within an unordered list. Although the paragraph is clickable, unfortunately, the image itself is not responding as expected. <ul> <a href="/movies/test/"><li> ...

htmlcss

Tips for maintaining the position of items with absolute positioning while resizing:

Hello, I am seeking help with an issue in my code. My problem is as follows: I have two items and one frame. The frame has a position relative to the two items (children) which have positions set to absolute. Ideally, these children should always remain ...

htmlcss

Convince me otherwise: Utilizing a Sinatra API paired with a comprehensive JS/HTML frontend

As I embark on the journey of designing a social website that needs to support a large number of users, I have come up with an interesting approach: Implementing Sinatra on the backend with a comprehensive REST API to handle all operations on the website ...

javascripthtmlrubysinatraweb

Issue with data binding in file upload field

I am currently working on a project using Asp.Net Core MVC. In the model, there is a property called IFormFile. While using a basic input tag, everything works perfectly fine. However, when I tried to implement the file input plugin from this URL, the mode ...

htmlasp.net-coremodel-view-controllerbootstrap-5