Curso de HTML | Selectores avanzados de CSS 1

Curso de HTML
Selectores avanzados de CSS

Curso de HTML | Selectores avanzados de CSS 2

Curso de HTML | Selectores avanzados de CSS

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  

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.

Curso de HTML | Selectores avanzados de CSS 3

Ejercicio formulario con check image

exito en envío de formulario

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>