Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Selector + y selector ~
<style>
input + span{
background: purple;
color: white
}
/*alt gr + 4 para dibujar símbolo*/
input ~ div{
background: green;
color: white
}
</style>
<div>
<input type="text"><span>span con color de fondo</span><span>span con color de fondo</span>
<br>
<input type="text">
<div>div al mismo nivel</div>
<div>div al mismo nivel</div>
</div>
<div>
<span>span sin color de fondo</span>
</div>Ocultar/Mostrar información sin Javascript
<style>
input{
display: none;
}
input:checked + .texto{
background: red
}
</style>
<label for="pulsable">pulsable</label>
<input id="pulsable" type="checkbox">
<span class="texto">amor</span>Ejercicio spoiler
Al pulsar sobre un texto debe hacerse visible un texto contiguo. Al volver a pulsar, debe volver a hacerse invisible
Ejercicio – Checkboxes personalizados
Utilizando el estilo background-position para desplazar la imagen de fondo del label, crear un checkbox personalizado.
Ejercicio formulario con check image
Ejercicio first-of-type, last-of-type, :nth-of-type(n)
Utilizando los selectores :first-child, :last-child, :nth-child(n) y utilizando el siguiente código html, realizar la maquetación indicada a continuación.
<div id="ventana">
<div></div
><div>
<div></div
><div></div
><div></div>
</div
><div></div>
</div>Capa cuya altura se redimensiona automáticamente en función de su anchura
<style>
.square {
width: 50%;
background: blue
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
</style>
<div class='square'>
<div class='square-content'>
<div>
</div>