Hice un formulario ficticio y estaba aplicándole estilos, hasta que uno de los estilos que puse no funcionó. Usando class=".container__form-entry"
quiero que el elemento que escoja ocupe las dos columnas del grid; usando nth-of-type(numero)
me funciona, pero usando last-of-type
(o sea el último) no me está funcionando. Anteriormente me ha funcionado perfectamente pero este caso en particular no lo hace.(Buscar en el fragmento de css /*Raiz del problema/ para ver la duda que tengo)
:root{
font-size: 62.5%;
--lightbrown: #720;
--brown: #600;
--white: #fff;
}
body{
font-family: "Splice Sans", sans-serif;
}
h3{
font-size: 2.4rem;
color: #113;
margin: 0;
}
/* Utitities */
.centered-text{
text-align: center;
}
.small-text.small-text{
font-size: 1.2rem;
}
/* Main container */
.container__form{
display: grid;
grid-template-columns: repeat(2, minmax(10rem, 1fr));
grid-template-rows: 3rem repeat(auto-fill, minmax(5rem, 1fr));
column-gap: 1rem;
row-gap: 1rem;
background: #fff;
padding: 4rem;
border-radius: 10px;
font-size: 1.2rem;
box-shadow: 2px 2px 20px 2px #aaa;
text-align: center;
align-items: center;
}
.container__form h3{
display: block;
grid-column: 1 / 3;
}
.container__form-entry{
text-align: center;
background: var(--lightbrown);
border-radius: 5px;
padding: 1rem;
color: var(--white);
}
.container__form-entry textarea{
resize: none;
}
.container__form-label{
display: block;
font-weight: bold;
}
.container__form-submit{
grid-column: 1 / 3;
}
/*Raiz del problema*/
.container__form-entry:last-of-type{
grid-column: 1 / 3;
}
/*Raiz del problema*/
.reminder{
color: #888;
width: 70%;
font-size: 2.4rem;
margin: auto;
background: #f8f8f8;
border: 1px solid #ddd;
border-radius: 10px;
grid-column: 1 / 3;
text-align: center;
}
.button{
display: inline-block;
border-radius: 2px;
border:none;
padding: 2rem;
text-decoration: none;
background: var(--lightbrown);
color: var(--white);
font-weight: bold;
margin: 0 0 1.6rem 0;
}
<form action="" class="container__form">
<h3>Formulario de Contacto</h3>
<p class="reminder small-text">OJO: Esta página es solo un experimento; no existe una ruta para enviar los datos de este formulario, ni siquiera
una base de datos para guardar dichos datos. Al presionar el botón "Enviar" simplemente recargarás la página
</p>
<div class="container__form-entry">
<label for="name" class="container__form-label">Nombres</label>
<input type="text" name="name" id="name" placeholder="Ej. Jesús David" required>
</div>
<div class="container__form-entry">
<label for="forename" class="container__form-label">Apellidos</label>
<input type="text" name="forename" id="forename" placeholder="Ej. Tovar Pérez" required>
</div>
<div class="container__form-entry">
<label for="email" class="container__form-label">Correo Electrónico</label>
<input type="email" name="email" id="email" placeholder="ejemplo@ejemplo.com" required>
</div>
<div class="container__form-entry">
<label for="phone-number" class="container__form-label">Número Telefónico</label>
<select name="phone-number-prefix" id="" required >
<option disabled selected>Seleccione un prefijo</option>
<option value="1">Estados Unidos(+1)</option>
<option value="34">España(+34)</option>
<option value="51">Perú(+51)</option>
<option value="53">Cuba(+53)</option>
<option value="54">Argentina(+54)</option>
<option value="55">Brasil(+55)</option>
<option value="57">Colombia(+57)</option>
<option value="58">Venezuela(+58)</option>
<option value="593">Ecuador(+593)</option>
<option value="850">Corea del Norte(+850)</option>
</select>
<input type="tel" name="phone-number" id="phone-number" placeholder="Ej. +5812345678901" required>
</div>
<div class="container__form-entry">
<label for="reason" class="container__form-label">¿Para qué nos contactas?</label>
<textarea name="" id="reason" cols="50" rows="8" placeholder="Indica tus razones" required></textarea>
</div>
<div class="container__form-submit">
<input type="submit" value="Enviar" class="button">
</div>
</form>
OJO el textarea
sí es ancho simplemente porque le coloqué un cols="50"
.
Reemplazando last-of-type
por nth-of-type(último)
en la línea 71 sí me funciona(Buscar en el fragmento de css /*Raiz del problema/ para ver la duda que tengo):
:root{
font-size: 62.5%;
--lightbrown: #720;
--brown: #600;
--white: #fff;
}
body{
font-family: "Splice Sans", sans-serif;
}
h3{
font-size: 2.4rem;
color: #113;
margin: 0;
}
/* Utitities */
.centered-text{
text-align: center;
}
.small-text.small-text{
font-size: 1.2rem;
}
/* Main container */
.container__form{
display: grid;
grid-template-columns: repeat(2, minmax(10rem, 1fr));
grid-template-rows: 3rem repeat(auto-fill, minmax(5rem, 1fr));
column-gap: 1rem;
row-gap: 1rem;
background: #fff;
padding: 4rem;
border-radius: 10px;
font-size: 1.2rem;
box-shadow: 2px 2px 20px 2px #aaa;
text-align: center;
align-items: center;
}
.container__form h3{
display: block;
grid-column: 1 / 3;
}
.container__form-entry{
text-align: center;
background: var(--lightbrown);
border-radius: 5px;
padding: 1rem;
color: var(--white);
}
.container__form-entry textarea{
resize: none;
}
.container__form-label{
display: block;
font-weight: bold;
}
.container__form-submit{
grid-column: 1 / 3;
}
.container__form-entry:nth-of-type(5){
grid-column: 1 / 3;
}
.reminder{
color: #888;
width: 70%;
font-size: 2.4rem;
margin: auto;
background: #f8f8f8;
border: 1px solid #ddd;
border-radius: 10px;
grid-column: 1 / 3;
text-align: center;
}
.button{
display: inline-block;
border-radius: 2px;
border:none;
padding: 2rem;
text-decoration: none;
background: var(--lightbrown);
color: var(--white);
font-weight: bold;
margin: 0 0 1.6rem 0;
}
<form action="" class="container__form">
<h3>Formulario de Contacto</h3>
<p class="reminder small-text">OJO: Esta página es solo un experimento; no existe una ruta para enviar los datos de este formulario, ni siquiera
una base de datos para guardar dichos datos. Al presionar el botón "Enviar" simplemente recargarás la página
</p>
<div class="container__form-entry">
<label for="name" class="container__form-label">Nombres</label>
<input type="text" name="name" id="name" placeholder="Ej. Jesús David" required>
</div>
<div class="container__form-entry">
<label for="forename" class="container__form-label">Apellidos</label>
<input type="text" name="forename" id="forename" placeholder="Ej. Tovar Pérez" required>
</div>
<div class="container__form-entry">
<label for="email" class="container__form-label">Correo Electrónico</label>
<input type="email" name="email" id="email" placeholder="ejemplo@ejemplo.com" required>
</div>
<div class="container__form-entry">
<label for="phone-number" class="container__form-label">Número Telefónico</label>
<select name="phone-number-prefix" id="" required >
<option disabled selected>Seleccione un prefijo</option>
<option value="1">Estados Unidos(+1)</option>
<option value="34">España(+34)</option>
<option value="51">Perú(+51)</option>
<option value="53">Cuba(+53)</option>
<option value="54">Argentina(+54)</option>
<option value="55">Brasil(+55)</option>
<option value="57">Colombia(+57)</option>
<option value="58">Venezuela(+58)</option>
<option value="593">Ecuador(+593)</option>
<option value="850">Corea del Norte(+850)</option>
</select>
<input type="tel" name="phone-number" id="phone-number" placeholder="Ej. +5812345678901" required>
</div>
<div class="container__form-entry">
<label for="reason" class="container__form-label">¿Para qué nos contactas?</label>
<textarea name="" id="reason" cols="50" rows="8" placeholder="Indica tus razones" required></textarea>
</div>
<div class="container__form-submit">
<input type="submit" value="Enviar" class="button">
</div>
</form>
Lo que quiero saber es a qué se debe este comportamiento, ya que me hace creer que last-of-type
puede llegar a ser impredecible