Skip to content

Instantly share code, notes, and snippets.

@joelalejandro
Created September 4, 2020 23:56
Show Gist options
  • Select an option

  • Save joelalejandro/a2e38b90f6f04f46536b9a3dc3ee8ff3 to your computer and use it in GitHub Desktop.

Select an option

Save joelalejandro/a2e38b90f6f04f46536b9a3dc3ee8ff3 to your computer and use it in GitHub Desktop.
Pseudoclases
/* Aplico estilos para elemento enfocado
a todas las etiquetas cuyo atributo type sea text */
body {
background: #EED870;
}
#pseudoclase-focus input {
background: transparent;
border: 0;
border-bottom: 1px solid gray;
}
#pseudoclase-focus input:focus {
/* background: yellow; */
background: white;
}
#pseudoclase-hover button {
background-color: black;
color: white;
border: 1px solid gray;
padding: 2rem;
border-radius: 10px;
transition: 100ms linear; /* ANIMACIONES! */
position: relative;
top: 0;
}
#pseudoclase-hover button:hover {
background-color: white;
color: black;
position: relative;
top: -20px;
}
#pseudoclase-empty .lista-tareas {
list-style: none; /* borra viñetas */
}
#pseudoclase-empty .lista-tareas:empty {
border: 1px dotted red;
padding: 1rem;
}
#pseudoclase-child .imagenes :first-child {
border: 3px solid red;
}
#pseudoclase-child .imagenes > img {
border: 3px solid blue;
}
#pseudoclase-child .imagenes img:nth-of-type(2) {
border: 3px solid green;
}
#pseudoclase-child .imagenes img:nth-child(4) {
border: 3px solid fuchsia;
}
#pseudoclase-child .imagenes :last-child {
border: 3px solid black;
}
<div id="pseudoclase-focus">
<h3>Estilos para elemento enfocado (:focus)</h3>
<form>
<div>
<label for="nombre">Nombre</label>
<input name="nombre" type="text">
</div>
<div>
<label for="apellido">Apellido</label>
<input name="apellido" type="text">
</div>
<div>
<label for="email">E-mail</label>
<input name="email" type="email">
</div>
</form>
</div>
<div id="pseudoclase-hover">
<h3>Estilos para elemento con mouse encima (:hover)</h3>
<button>Comprar</button>
<button class="boton">Comprar</button>
</div>
<div id="pseudoclase-empty">
<h3>Estilos para elemento vacío (:empty)</h3>
<ul class="lista-tareas"></ul>
</div>
<div id="pseudoclase-child">
<h3>Estilos para primer, último y enésimo descendiente (:first-child)</h3>
<div class="imagenes">
<p>Fotos</p>
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<p>Último elemento</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment