Border all sections but first

Question

I'm trying to top-border all sections but first within an article. But I can only border all sections. How can I achieve that?

My Code is this:

 article.result > section.content{
    border-top:1px solid red;
}
article.result > section.content:first-of-type{
    border-top:none;
}

<article class='result'>
 <section class="traits">
  <div class="d-inline-flex justify-content-start align-items-center">
   <h3 class='d-flex'>FIGHTER</h3><h3 class='d-flex'>FLOURISH</h3>
  </div>
 </section>     
 <section class='content'><p>bla-bla-bla</p></section>
 <section class='content'><p>bla2-bla2-bla2</p></section>
</article>

This code gives me all sections with border on the top, and I wanted all bordered but the first.

EDITED!!

I've added one line of code that had my original web that made css not work at all. I think that the fact there is another section (section.traits before the section.content makes it work wrong. How can I fixed it?

If I'm getting right you don't want border on first element right? If so the above code seems to work fine. — Piyush, Jul 26 '19 at 06:31
as @Piyush stated i have made edit on your question with snippet and its working as expected — NickCoder, Jul 26 '19 at 06:34
Not really. There is something elñse in my code that does not allow to achieve the border thing. Look at my test page: http://pf2.easytool.es/proba.php — nanmaniac, Jul 26 '19 at 07:05

score 0 · Answer 1 · answered Jul 26 '19 at 06:31

0

You code looks fine but you can still do it in a one selector like following. Use not() css selector.

article.result>section.content:not(:first-of-type) {
  border-top: 1px solid red;
}

<article class='result'>
  <section class='content'>
    <p>bla-bla-bla</p>
  </section>
  <section class='content'>
    <p>bla2-bla2-bla2</p>
  </section>
</article>

answered Jul 26 '19 at 06:31

Dhaval Marthak

17,246
6
46
68

I cannot say it's ok, cos my webpage is not working with this code. Look at this site: http://pf2.easytool.es/proba.php – nanmaniac Jul 26 '19 at 06:59

score 0 · Answer 2 · answered Jul 26 '19 at 06:38

0

your code is working fine on my side. the border already has removed from the first section. But I give you other methods you can try this.

article.result > section.content:not(:first-child){
    border-top:1px solid red;
}

answered Jul 26 '19 at 06:38

Mani Shankar Mandal

46
5

It does not work with my site... I'll add the complete css... My site is: http://pf2.easytool.es/proba.php – nanmaniac Jul 26 '19 at 06:46

score 0 · Answer 3 · answered Jul 26 '19 at 07:31

Ok I found the solution! I realized where the problem was and I follow the instructions given at CSS selector for first element with class

And then I apply the code like this:

<article class='result'>
 <section class="traits">
  <div class="d-inline-flex justify-content-start align-items-center">
   <h3 class='d-flex'>FIGHTER</h3><h3 class='d-flex'>FLOURISH</h3>
  </div>
 </section>     
 <section class='content'><p>bla-bla-bla</p></section>
 <section class='content'><p>bla2-bla2-bla2</p></section>
</article>

_

article.result> section.content {
      border-top: none;
}
article.result> section.content ~ section.content {
      border-top: 1px solid red;
}

And that's it!

iPramod · Answer 4 · 2019-07-26T08:01:30.063

Can you please try this

article.result > section.content + section.content {
    border-top: 1px solid red;
}

<article class="result">
      <section class="traits">
        <div class="d-inline-flex justify-content-start align-items-center">
          <h3 class="d-flex">FIGHTER</h3>
          <h3 class="d-flex">FLOURISH</h3>
        </div>
      </section>
      <section class="content"><p>bla-bla-bla</p></section>
      <section class="content"><p>bla2-bla2-bla2</p></section>
</article>

Border all sections but first

4 Answers4