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.