Selectores avanzados de CSS

Contactar con el profesor

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

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>
← Parallax
Novedades de HTML5 →

Aviso Legal | Política de privacidad