All geek questions in one place

How to reset CSS :: after style only for last element?

I use :after, and :beforeCSS for your event. I have a button called a timeline. when I click the timeline button, it adds an event and uses :after. I am attaching this event that looks good, but I want to delete the last event after the effect.

Here I insert my code that works correctly. I am adding an image that shows you what is going wrong.

enter image description here

Here is my code:

div[type="timeline"]>section {
  margin: auto;
  width: 900px;
  z-index: 100;
  opacity: 0.5;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

div[type="timeline"]>section:hover {
  opacity: 1;
}

div[type="timeline"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline"]>section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55px;
  width: .2rem;
  background: grey;
  height: 55px;
}

div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 34px;
  font-family: arial;
  position: relative;
}

div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}
<div type='timeline' id='slide'>
  <section>
    <header>Title One</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Two</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Three</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Four</header>
    <article>Content</article>
  </section>
</div>
Run codeHide result
+4
source share
6 answers

You can use :last-of-type, :last-child, :nth-last-of-type(1)or :nth-last-child(1)to target the latter sectionand pseudo reset it:

div[type="timeline"]>section:last-of-type::after {
  display: none;
}

:not() section :

div[type="timeline"]>section:not(:last-of-type)::after {
  ...
}
+6

. css.

+2
div[type="timeline"]>section:last-child::after {
   display: none;
}
+2

CSS , :

div[type="timeline"]>section:last-child::after  {
   height: 0;
}

- :after, section 0, .

, 0, /, .

div[type="timeline"] > section  {
        margin: auto;
        width: 900px;
        z-index: 100;
        opacity: 0.5;
        border-left: 4px solid #00BCD4;
        border-top: 1px solid grey;
        min-height:250px;
        background-color: #b3e5fc2b;
        border-radius: 4px;
        margin-bottom: 55px;
        position: relative;
        top: 50px;
        box-shadow: rgb(136, 136, 136) 3px 3px 1px;
        -webkit-animation: fadein 2s
        -moz-animation: fadein 2s; 
        -ms-animation: fadein 2s;
        -o-animation: fadein 2s; 
        animation: fadein 2s;
    }

    div[type="timeline"] > section:hover {
        opacity:1;
    } 
    
    div[type="timeline"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: .2rem;
        background: white;
        height: 55px;
    }
    
    div[type="timeline"]>section::after  {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -55px;
        width: .2rem;
        background: grey;
        height: 55px;
    }
    div[type="timeline"]>section:last-child::after  {
       height: 0;
    }
 
   div[type="timeline"] > section> header  {
        font-weight: 600;
        color: cadetblue;
        transform: translate(16px, 23px);
        font-size: 34px;
        font-family: arial;
        position: relative;
    }
   div[type="timeline"] > section> article {
        transform: translate(12px,14px);
        color: black;
        font-size: 22px;
        font-family: arial;
        position: relative;
        padding: 10px;
        word-wrap: break-word;
    }
<div type='timeline' id='slide'>
	<section>
		<header>Title One</header>
		<article>Content</article>
	</section>
	<section>
		<header>Title Two</header>
		<article>Content</article>
	</section>
	<section>
		<header>Title Three</header>
		<article>Content</article>
	</section>
	<section>
		<header>Title Four</header>
		<article>Content</article>
	</section>
</div>
Hide result
+2

div[type="timeline"]>section::after{} div[type="timeline"]>section:not(:last-child)::after{}

div[type="timeline"]>section {
  margin: auto;
  width: 900px;
  z-index: 100;
  opacity: 0.5;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

div[type="timeline"]>section:hover {
  opacity: 1;
}

div[type="timeline"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline"]>section:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55px;
  width: .2rem;
  background: grey;
  height: 55px;
}

div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 34px;
  font-family: arial;
  position: relative;
}

div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}
<div type='timeline' id='slide'>
  <section>
    <header>Title One</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Two</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Three</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Four</header>
    <article>Content</article>
  </section>
</div>
Hide result
+2

ID , #four CSS :not.

, !

div[type="timeline"]>section {
  margin: auto;
  width: 900px;
  z-index: 100;
  opacity: 0.5;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

div[type="timeline"]>section:hover {
  opacity: 1;
}

div[type="timeline"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline"]>section:not(#four):after   {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55px;
  width: .2rem;
  background: grey;
  height: 55px;
}

div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 34px;
  font-family: arial;
  position: relative;
}

div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}
<div type='timeline' id='slide'>
  <section id="one">
    <header>Title One</header>
    <article>Content</article>
  </section>
  <section id="two">
    <header>Title Two</header>
    <article>Content</article>
  </section>
  <section id="three">
    <header>Title Three</header>
    <article>Content</article>
  </section>
  <section id="four">
    <header>Title Four</header>
    <article>Content</article>
  </section>
</div>
Hide result
+1

Source: https://habr.com/ru/post/1695363/

More articles:


All Articles