CSS last: child does not work on my button

Question

CSS last: child does not work on my button

Navigation

#1 by (2 votes)

2

I have a series of buttons that when click display a text, each button has a border-bottom , I want to make all the buttons have that border minus the last one.

This is my code:

 <div class="collapse-container">
      <button  class="collapsible">Primer boton</button>     
      <p>Primer Texto</p>
      <button  class="collapsible">Segundo boton</button>
      <p>Segundo Texto</p>
      <button  class="collapsible">Tercer boton</button>
      <p>Tercer Texto</p>
 </div>

My css is as follows:

.collapsible{
  background-color: white;
  transition: border-bottom 1s, background-color .6s;
  cursor: pointer;
  padding-bottom: 20px;
  padding-top: 2%;
  width: 100%;
  border-style: none;
  border-bottom: 1px solid #707070;
  text-align: left;
  font-size: 15px;
}

.collapse-container button:last-child p{border-bottom: none;}

Any idea why it does not work?

html css

asked by Julian 30.11.2018 в 05:51

source

1 answer

Convert MD5 from file to string Variable accessible from the whole app

score 2 · Answer 1

You have a couple of bad things in that selector:

On the one hand you have a p at the end, which means you try to access a paragraph inside the button.

Even removing the p would not work since :last-child selects the last of a series of siblings and the button is not the last, the last is the paragraph.
To select the last element of a specific type you must use the pseudoclass :last-of-type :

.collapsible{
  background-color: white;
  transition: border-bottom 1s, background-color .6s;
  cursor: pointer;
  padding-bottom: 20px;
  padding-top: 2%;
  width: 100%;
  border-style: none;
  border-bottom: 1px solid #707070;
  text-align: left;
  font-size: 15px;
}

.collapse-container button:last-of-type{border-bottom: none;}

 <div class="collapse-container">
      <button  class="collapsible">Primer boton</button>     
      <p>Primer Texto</p>
      <button  class="collapsible">Segundo boton</button>
      <p>Segundo Texto</p>
      <button  class="collapsible">Tercer boton</button>
      <p>Tercer Texto</p>
 </div>