CURSO DE DESARROLLO WEB FRONTEND
OPERADORES Y PSEUDOCLASES
CLASE 12
h1 + h2 {
background: yellow;
color: black;
}SELECTORES
OPERADOR
PROPIEDADES
VALORES
OPERADORES _
PERMITEN QUE VARIOS SELECTORES SE RELACIONEN ENTRE SÍ, MODIFICANDO EL COMPORTAMIENTO DE NUESTROS ESTILOS.
operador coma ,
Permite que varios selectores compartan los mismos estilos.
¡Muy recomendado para reutilizar código!
,
.texto, .destacado {
font-family: sans-serif;
}
.texto {
font-size: 1rem;
}
.destacado {
font-size: 2rem;
}¡Esto no quiere decir que en HTML sí o sí deban usarse ambas clases en conjunto!
operador >
Restringe la aplicación de las reglas de estilos entre selectores, a través de una relación de descendiente directo.
>
.contenedor {
background: yellow;
display: flex;
}
.contenedor > .menu {
background: black;
color: white;
flex: 1;
}<nav class="contenedor">
<ul class="menu">
<li>
Opción 1
<ul class="menu">
<li>Subopción 1</li>
</ul>
</li>
<li>
Opción 2
</li>
</ul>
</nav><< a este sí
<< a este no
operador espacio
Restringe la aplicación de las reglas de estilos entre selectores, a través de una relación de descendiente indirecto.
.contenedor {
background: yellow;
display: flex;
}
.contenedor .menu {
background: black;
color: white;
flex: 1;
}<nav class="contenedor">
<ul class="menu">
<li>
Opción 1
<ul class="menu">
<li>Subopción 1</li>
</ul>
</li>
<li>
Opción 2
</li>
</ul>
</nav>
<ul class="menu">
<!-- -->
</ul><< a este sí
<< a este
también!
operador de atributo
[atributo="valor"]
Aplica las reglas del bloque a aquellas etiquetas que tengan un atributo con un valor definido.
[type="email"] {
background: yellow;
}
[required] {
border: 1px solid red;
}<div>
<input type="text" required placeholder="Nombre">
<input type="email" required placeholder="E-mail">
<button>Enviar</button>
</div>operador global
*
Aplica las reglas del bloque a todas las etiquetas.
* {
box-sizing: border-box;
}operador de adyacencia
+
Aplica las reglas del bloque a etiquetas seguidas una detrás de la otra con el mismo selector.
img {
display: block;
}
img + img {
padding-bottom: 2rem;
}<div class="fotos">
<img src="foto1.jpg">
<img src="foto2.jpg">
<img src="foto3.jpg">
</div><< a este sí
<< a este no
<< a este sí
nav.menu .opcion > a[target="_blank"]¿QUÉ HACE ESTA EXPRESIÓN EN CSS?
ESCRIBAN SUS RESPUESTAS EN EL CHAT!
PSEUDOCLASES _
PERMITEN REFINAR AÚN MÁS LA ESPECIFICIDAD DE NUESTRAS REGLAS, ACCEDIENDO A PARTICULARIDADES DE CADA ETIQUETA.
pseudoclase :focus
Aplica las reglas del bloque al selector cuando el elemento está enfocado.
pseudoclase :hover
Aplica las reglas del bloque al selector cuando el puntero del mouse está por encima del elemento.
pseudoclase :empty
Aplica las reglas del bloque al selector que no tenga ningún elemento como descendiente.
pseudoclase :first-child
Aplica las reglas del bloque al selector que sea el primer descendiente en su contenedor.
pseudoclase :last-child
Aplica las reglas del bloque al selector que sea el último descendiente en su contenedor.
pseudoclase :nth-child
Aplica las reglas del bloque al selector que sea el enésimo descendiente en su contenedor.
Copy of DoctaDevs: Clase 10
By Joel Alejandro Villarreal Bertoldi
Copy of DoctaDevs: Clase 10
Diapositivas de la clase 10 del curso de Desarrollo Web Full Stack de DoctaDevs.
