Style pseudo list elements by id after creation-CodePudding

I have a dynamically generated vertical timeline that contains <li> elements with an ::after pseudo-class.

My objective is, after the timeline is created, to style certain circular elements (to change the color of only the circles themselves). I do not understand why a class cannot be added to each specific element after the fact.

Edited with @RCC's answer: The following code selects the elements but in the end does not change the colors - is there a workaround to style the ::after class of specific list elements with Javascript? Any advice would be appreciated!

myArr = ['elem1', 'elem3', 'elem8']

 for (var i = 0; i < myArr.length; i  ) {

var elem=document.getElementById(myArr[i])
console.log(elem)
elem.className  = ".timeline ul li.newstyle::after {background:#3887be}";

}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #ffffff;
  color: #404040;
  overflow-x: hidden;
  padding-bottom: 50px;
}  


/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.intro {
  background: #FFFFFF;
  padding: 100px 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 2.5rem;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #404040;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #FFFFFF;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent transparent transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent transparent;
}

/* LEFT JUSTIFY
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li {
    margin-left: 20px;
  }
  
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;

  }

<section class="intro">
  <div class="container">
    <h1>Vertical Timeline &darr;</h1>
  </div>
</section>

<section class="timeline">
  <ul>
    <li id='elem1'>
      <div>
        <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
      </div>
    </li>
    <li id='elem2'>
      <div>
        <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
      </div>
    </li>
    <li id='elem3'>
      <div>
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
      </div>
    </li>
    <li id='elem4'>
      <div>
        <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem5'>
      <div>
        <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem6'>
      <div>
        <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem7'>
      <div>
        <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem8'>
      <div>
        <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
      </div>
    </li>
  </ul>
</section>

CodePudding user response：

Try this:

var myArr = ['elem1', 'elem3', 'elem8'];

for (var i = 0; i < myArr.length; i  ) { // "i" is the index!
  var elem = document.getElementById( myArr[i] ); // "myArr[i]" to get the item
  elem.className  = " newstyle";
}

Also, ever put var before the variables declaretion.

And on CSS add the new class:

.timeline ul li.newstyle::after {background:#3887be}

Check: https://jsfiddle.net/rcheruti/qeb1yzu0/6/

CodePudding user response：

this way

add to your css

.timeline ul li.newStyle::after { /* TIMELINE   newStyle –––– */
  background  :#3887be;   
  }

change your JS :

const myArr = ['elem1', 'elem3', 'elem8']

myArr.forEach( el =>
  document.getElementById(el).classList.add('newStyle')
  )

*,
*::before,
*::after {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  }
body {
  font           : normal 16px/1.5 "Helvetica Neue", sans-serif;
  background     : #ffffff;
  color          : #404040;
  overflow-x     : hidden;
  padding-bottom : 50px;
  }
/* INTRO SECTION –––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
  background : #FFFFFF;
  padding    : 100px 0;
  }
.container {
  width     : 90%;
  max-width : 1200px;
  margin    : 0 auto;
  text-align : center;
  }
h1 {
  font-size : 2.5rem;
  }
/* TIMELINE–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li {
  list-style-type : none;
  position        : relative;
  width           : 6px;
  margin          : 0 auto;
  padding-top     : 50px;
  background      : #404040;
  }
.timeline ul li::after {
  content       : '';
  position      : absolute;
  left          : 50%;
  bottom        : 0;
  transform     : translateX(-50%);
  width         : 30px;
  height        : 30px;
  border-radius : 50%;
  background    : inherit;
  }
.timeline ul li.newStyle::after { /* TIMELINE   newStyle –––– */
  background  :#3887be;   
  }
.timeline ul li div {
  position   : relative;
  bottom     : 0;
  width      : 400px;
  padding    : 15px;
  background : #FFFFFF;
  }
.timeline ul li div::before {
  content      : '';
  position     : absolute;
  bottom       : 7px;
  width        : 0;
  height       : 0;
  border-style : solid;
  }
.timeline ul li:nth-child(odd) div {
  left : 45px;
  }
.timeline ul li:nth-child(odd) div::before {
  left         : -15px;
  border-width : 8px 16px 8px 0;
  border-color : transparent transparent transparent transparent;
  }
.timeline ul li:nth-child(even) div {
  left : -439px;
  }
.timeline ul li:nth-child(even) div::before {
  right        : -15px;
  border-width : 8px 0 8px 16px;
  border-color : transparent transparent transparent transparent;
  }
/* LEFT JUSTIFY–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li {
  margin-left  : 20px;
  }
.timeline ul li div {
  width        : calc(100vw - 91px);
  }
.timeline ul li:nth-child(even) div {
  left         : 45px;
  }
.timeline ul li:nth-child(even) div::before {
  left         : -15px;
  border-width : 8px 16px 8px 0;
  }

  <section class="intro">
    <div class="container">
      <h1>Vertical Timeline &darr;</h1>
    </div>
  </section>
  
  <section class="timeline">
    <ul>
      <li id='elem1'>
        <div>
          <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
        </div>
      </li>
      <li id='elem2'>
        <div>
          <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
        </div>
      </li>
      <li id='elem3'>
        <div>
          <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
        </div>
      </li>
      <li id='elem4'>
        <div>
          <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem5'>
        <div>
          <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem6'>
        <div>
          <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem7'>
        <div>
          <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem8'>
        <div>
          <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
        </div>
      </li>
    </ul>
  </section>

CodePudding user response：

I think you forgot to look up the string value in the array.

Try elem=document.getElementById(myArr[i])