I made a dummy form and was applying styles to it, until one of the styles I put in didn't work. Using class=".container__form-entry"
I want the element you choose to occupy the two columns of the grid; using nth-of-type(numero)
it works for me, but using last-of-type
(that is the last one) is not working for me. Previously it has worked perfectly for me but in this particular case it doesn't.
: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="[email protected]" 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>
EYE yes it textarea
is wide simply because I put a cols="50"
.
Replacing last-of-type
with nth-of-type(último)
on line 71 does work for me (Search the css snippet /* Root of the problem / to see the question I have):
: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="[email protected]" 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>
What I want to know is what is causing this behavior, since it makes me believe that it last-of-type
can become unpredictable
The problem is that they
:last-of-type
do:nth-of-type
n't work as many of us would like. We'd like it to look like it's some sort of:last-of-class
and:nth-of-class
, but it's not.For example, what you are really looking at when you put
.container__form-entry:last-of-type
is, where there is a block with that class, if its last sibling of the same type (div
,span
, ...) has that class, in that case it applies the styles.examples
Suppose we have this css, in which, if it
nth-of-type
works for us, it will put the text in red, and, if itlast-of-type
works, it will put a background colorExample 1: In the first case we have 3 blocks in a row with the class
similar
, and the last one has the classdiferente
:In this case the result would be the following:
As the last element does not have the class,
similar
it does not apply the styles.Example 2: If we swap the position of the last and penultimate blocks:
In this second case, in position 3 there is no block with the class
similar
, so the styles of thenth-of-type
. But, since the last element does have the class, it has a background color:Example 3: As a last example, I add at the end a
span
with the similar class:The result is that it sets the background color to the last element
div
that carries the classsimilar
, and also to the lastspan
one that carries that class:I hope it helps you