CheatSheet de CSS

Los selectores en CSS son esenciales para apuntar a los elementos del HTML a los que queremos aplicar estilos

Selector de tipo (elemento)

Selecciona todos los elementos de un tipo específico.

p {
  color: blue;
}

Selector de clase*

Selecciona cualquier elemento con una clase específica. Las clases se identifican con un punto (.) seguido del nombre de la clase.

.button {
  background-color: green;
}

<div class="button primary large"></div>

Selector de ID

Selecciona un único elemento que tenga un ID específico. Los IDs se identifican con un símbolo de almohadilla (#).

#header {
  background-color: red;
}

Selector Universal

Selecciona todos los elementos del documento.

* {
  margin: 0;
  padding: 0;
}

Selector de Grupo

Permite agrupar varios selectores para aplicar el mismo estilo a múltiples elementos.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Selector Descendente (hijo indirecto)

Selecciona todos los elementos que están dentro de otro elemento (descendientes).

div p {
  color: blue;
}

Este selector selecciona todos los párrafos (<p>) que son descendientes de un contenedor <div>.

Selector de Hijo Directo

Selecciona únicamente los elementos que son hijos directos de un elemento.

ul > li {
  list-style-type: none;
}

Este selector afecta solo a los <li> que son hijos directos de un <ul>, ignorando los descendientes más profundos.

Selector de Hermano General

Selecciona cualquier elemento que sea un hermano de otro, es decir, que comparta el mismo padre y aparezca después.

h1 ~ p {
  color: green;
}

Este selector selecciona todos los párrafos (<p>) que sean hermanos de un <h1> y aparezcan después de él en el HTML.

Selector de Hermano Adyacente

Selecciona el hermano inmediato de un elemento.

h1 + p {
  color: red;
}

Este selector afecta al primer párrafo (<p>) que aparezca inmediatamente después de un <h1>.

Los selectores de atributos permiten seleccionar elementos basados en atributos HTML específicos y sus valores.

Selector de atributo básico

Selecciona elementos que contienen un atributo específico.

input[type="text"] {
  border: 1px solid black;
}

Este selector afectará a cualquier <input> que tenga el atributo type="text".

Selector de atributo con valor parcial

• [attr^="value"]: Selecciona elementos cuyo valor de atributo comience con “value”.
• [attr$="value"]: Selecciona elementos cuyo valor de atributo termine con “value”.
• [attr*="value"]: Selecciona elementos cuyo valor de atributo contenga “value”.

a[href^="https"] {
  color: green;
}

En este ejemplo, cualquier enlace (<a>) cuyo valor del atributo href comience con "https" se mostrará en verde.

Selector de atributo con valor separado por espacio

Selecciona elementos cuyo atributo contiene una lista de valores separados por espacios, donde uno de los valores coincide.

[class~="highlight"] {
  background-color: yellow;
}

Este selector afectará a cualquier elemento cuya clase incluya “highlight” dentro de una lista de clases.

Selector de atributo con valor separado por guion

Selecciona elementos cuyos atributos contienen valores separados por guiones, y selecciona aquellos que comiencen con el valor especificado.

[lang|="en"] {
  font-style: italic;
}

Este selector selecciona elementos cuyo atributo lang comienza con “en”, como en-US o en-GB.

Las pseudoclases dinámicas afectan a elementos en función de su estado interactivo.

Aplica estilos cuando el usuario coloca el cursor sobre el elemento.

button:hover {
  background-color: blue;
}

Aplica estilos cuando el elemento ha recibido el foco, generalmente en formularios.

input:focus {
  border-color: green;
}

Aplica estilos mientras el elemento está siendo activado (por ejemplo, cuando se hace clic en él).

a:active {
  color: red;
}

Selecciona el primer hijo de su contenedor.

p:first-child {
  font-weight: bold;
}

Selecciona el último hijo de su contenedor.

li:last-child {
  color: red;
}

(n)

Selecciona el enésimo hijo, donde n puede ser un número, una fórmula o una palabra clave.

tr:nth-child(odd) {
  background-color: #eee;
}

Este selector afecta a las filas impares (odd) de una tabla.

(n)

Selecciona el enésimo hijo del mismo tipo de elemento.

p:nth-of-type(2) {
  font-size: 20px;
}

Este selector afecta al segundo párrafo dentro de un contenedor, sin importar si hay otros tipos de elementos.

(selector)

Selecciona elementos que no coinciden con el selector especificado.

input:not([type="submit"]) {
  border: 1px solid grey;
}

Este selector afecta a todos los campos de entrada (<input>) que no tengan el atributo type="submit".

(selector)

Selecciona elementos que contienen al menos un elemento que coincide con el selector especificado.

div:has(> p) {
  background-color: lightblue;
}

Este selector aplica un fondo azul claro a todos los <div> que contienen al menos un párrafo (<p>) como hijo directo.

::before y ::after

Permiten insertar contenido antes o después del contenido de un elemento.

h1::before {
  content: "★ ";
  color: gold;
}

Este selector añade una estrella antes del contenido de todos los <h1>.

p::after {
  content: " ➜";
  color: blue;
}

Este selector añade una flecha después del contenido de todos los <p>.

::first-letter y ::first-line

::first-letter: Selecciona la primera letra de un elemento bloque.

p::first-letter {
  font-size: 2em;
  color: red;
}

::first-line: Selecciona la primera línea del texto en un elemento.

p::first-line {
  font-weight: bold;
}

Unidades Comunes

Unidades de Vista (Viewport)

Formatos de Color

Mezcla de colores

color-mix() permite mezclar dos colores en una proporción específica, generando un nuevo color a partir de ellos.

element {
  color:  color-mix(in srgb, var(--mi-color), #0000 75%);
}

Definición de color a partir de otro

color(from) define un color a partir de un modelo de color específico (como srgb, hsl, etc.).

element {
  color: hsl(from var(--mi-color) h 52% 45%);
}

El modelo de caja en CSS define cómo se calculan las dimensiones y el espaciado de un elemento.

Usar resets de CSS

Se emplean para eliminar estilos predeterminados inconsistentes entre navegadores.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Estático (por defecto)

El posicionamiento por defecto. Los elementos fluyen en el documento.

div {
  position: static;
}

Relativo

Posiciona un elemento en relación a su posición original.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

Absoluto

Posiciona un elemento en relación a su contenedor más cercano que tenga una posición diferente a estática.

div {
  position: absolute;
  top: 0;
  right: 0;
}

Fijo

Posiciona un elemento en relación a la ventana del navegador.

div {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Sticky

Permite a un elemento ser tratado como relativo hasta que se alcance un desplazamiento específico, luego se comporta como fijo.

div {
  position: sticky;
  top: 10px;
}

Márgenes

Los márgenes definen el espacio exterior de un elemento.

h2 {
    margin: 20px;
}

Padding

El relleno (padding) define el espacio interior de un elemento.

div {
    padding: 10px;
}

Contenedor Flex

Para utilizar Flexbox, se define un contenedor como display: flex.

.container {
  display: flex;
  justify-content: center; /* Alinea los elementos horizontalmente */
  align-items: center; /* Alinea los elementos verticalmente */
}

Dirección del eje (flex-direction)

.container {
  flex-direction: column; /* Cambia la dirección del flujo a columna */
}

Distribución del espacio

.container {
  justify-content: space-between; /* Espacio igual entre elementos */
}

Alineación individual

.item {
  align-self: flex-end; /* Alinea un solo elemento */
}

Contenedor Grid

Para utilizar Grid, se define un contenedor como display: grid.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
  grid-template-rows: auto; /* Filas automáticas */
}

Espacios entre elementos

Define el espacio entre columnas y filas.

.grid-container {
    gap: 10px;
}

Posicionamiento en el grid

.item {
  grid-column: 1 / 3; /* Ocupar desde la columna 1 hasta la 3 */
  grid-row: 2 / 4; /* Ocupar desde la fila 2 hasta la 4 */
}

Se pueden definir en diferentes formatos: nombres, RGB, HEX, HSL.

h1 {
  color: #ff5733; /* Usando hexadecimal */
  background-color: rgb(255, 99, 71); /* Usando RGB */
}

Color de texto

Se utiliza la propiedad color para definir el color del texto.

h1 {
    color: #ff5733;
}

Color de fondo

La propiedad background-color establece el color de fondo de un elemento.

div {
	background-color: lightgray;
}

Transparencia y opacidad

div {
  background-color: rgba(255, 0, 0, 0.5); /* Transparente */
  opacity: 0.8; /* Aplica transparencia al elemento completo */
}

Imágenes de fondo

body {
  background-image: url('fondo.jpg');
  background-size: cover; /* Escala la imagen para cubrir todo el fondo */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}

Bordes

Personaliza bordes con diferentes estilos, grosores y colores.

div {
  border: 2px dashed red;
  border-radius: 10px; /* Bordes redondeados */
}

Sombra en elementos

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Sombra de texto

h1 {
  text-shadow: 2px 2px 5px grey;
}

Control de capas con z-index

Define el orden en el que se apilan los elementos.

div {
  position: relative;
  z-index: 10; /* Este elemento se colocará encima de otros */
}

Fuente predeterminada

body {
  font-family: Arial, sans-serif;
}

Estilo y tamaño de fuente

h1 {
  font-size: 24px;
  font-style: italic;
  font-weight: bold;
}

Transformaciones de texto

p {
  text-transform: uppercase; /* Cambia el texto a mayúsculas */
  text-align: center; /* Alinea el texto en el centro */
  letter-spacing: 2px; /* Ajusta el espaciado entre letras */
}

button {
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: red;
}

@keyframes slidein {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

div {
  animation: slidein 2s forwards;
}

Definición de variables

Permiten definir valores reutilizables. Deben empezar por --.

:root {
  --main-color: #3498db;
}

Acceso a variables

Se emplea la función var().

h1 {
  color: var(--main-color);
}

Media queries

Cambian los estilos según el tamaño de la pantalla.

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Tamaños relativos

Uso de unidades como em, rem, % para diseños flexibles.

p {
  font-size: 2rem; /* Escala según la raíz del documento */
}

BEM (Block Element Modifier)

BEM es una metodología que mejora la estructura de CSS para facilitar su mantenimiento.

• Block: un componente independiente (ej. menu).
• Element: una parte de un bloque (ej. menu__item).
• Modifier: una variación de un bloque o elemento (ej. menu__item--active).

.menu {
    /* estilos del bloque */
}

.menu__item {
    /* estilos del elemento */
}

.menu__item--active {
    /* estilos del modificador */
}