3

Tengo una serie de botones que al hacer click despliegan un texto, cada botón tiene un border-bottom, quiero hacer que todos los botones tengan ese border menos el último.

Este es mi código:

 <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>

Mi css es el siguiente:

.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;}

¿Alguna idea de por qué no funciona?

1 respuesta 1

2

Tienes un par de cosas mal en ese selector:

Por una parte tienes una p al final, lo que significa que intentas acceder a un párrafo dentro del botón.

Aún quitando la p no funcionaría ya que :last-child selecciona el último de una serie de hermanos y el botón no es el último, el último es el párrafo.
Para seleccionar el último elemento de un tipo concreto debes usar la pseudoclase :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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.