Selectores avanzados de CSS

Curso de HTML

6.  
16.  
17.  
23.  
32.  
34.  
36.  
37.  
38.  
40.  
45.  
46.  
47.  
52.  
54.  
56.  
59.  

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 formulario con check image

exito en envío de formulario

Ejercicio first-child, last-child, :nth-child(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>
← Formularios en HTML
Responsive Design con media queries →

Aviso Legal | Política de privacidad