Curso de CSS / selectores básicos: tipo, clase, ID y atributos

Los selectores de CSS identifican los elementos HTML a los que se aplica una regla. Los selectores de tipo coinciden con los nombres de etiquetas, los selectores de clase coinciden con etiquetas reutilizables, los selectores de ID coinciden con un identificador y los selectores de atributos coinciden con atributos o sus valores.

Compara selectores contra el mismo HTML

Leamos el selector basándonos en los siguientes cuatro elementos: A y B son p y tienen una clase notice, y B también tiene una clase urgent. C es un p sin clase, D es un div con una clase notice. Las letras inglesas A~D son solo marcas para distinguir objetos en la descripción y no son sintaxis CSS.

<p id="opening" class="notice" data-tags="garden visit">A: Operating hours</p>
<p class="notice urgent">B: Rainy weather notice</p>
<p>C: What you need</p>
<div class="notice">D: Information box</div>

Al leer un selector, asegúrate de que la condición esté en el mismo elemento al que se aplicará el CSS. Las dos condiciones en p.notice se refieren al mismo elemento. Por otro lado, el espacio en p .notice significa encontrar otro elemento dentro de p. Las reglas que cambian el objetivo dependiendo del espacio se pueden encontrar junto con la estructura en Combinadores y pseudoclases de CSS .

Usa selectores de tipo y universales

p { color: #333; }
* { box-sizing: border-box; }

p selecciona todos los elementos p. Es simple decorar la misma etiqueta en común, pero para decorar los párrafos de aviso y del cuerpo por separado, se requieren condiciones adicionales como la clase. El selector universal * es una notación que selecciona todos los elementos. No incluye automáticamente los pseudo-elementos.

Aquí, box-sizing: border-box es una configuración auxiliar que calcula incluyendo el padding y el borde al especificar el ancho y alto. Puedes hacer este ejercicio incluso si aún no has aprendido todos los detalles de los cálculos de tamaño. Usar un selector universal no significa que tengas que cambiar todos los colores de texto y fondos de una vez. Piensa en el diseño de configuraciones comunes y elementos específicos.

Selecciona clases e IDs

.notice { background-color: #e9f7ef; }
p.notice { border-left: 4px solid #087f5b; }
.notice.urgent { font-weight: bold; }
#opening { color: #087f5b; }

Una clase se puede reutilizar para múltiples elementos. class="notice urgent" en HTML es una lista de dos nombres de clase con espacios, no un solo nombre notice urgent. En CSS, agrega un punto delante para seleccionar .notice o .urgent. .notice.urgent solo se aplica a elementos con ambos nombres.

Un ID debe ser único dentro de un documento HTML. No des a diez avisos el mismo id="opening". Usa clases para estilos reutilizables y IDs para identificación única o destinos de fragmentos. Los selectores de ID tienen mayor especificidad que los selectores de clase, pero la especificidad se compara dentro del origen aplicable, la importancia y las condiciones de capa; agregar IDs indiscriminadamente hace que los conflictos sean más difíciles de mantener. Para más detalles, consulta CSS Herencia, Especificidad y la Cascada.

En el ejemplo, coloreamos por ID para mostrar diferencias entre los sujetos. Si realmente necesitas el mismo color verde para múltiples avisos, puedes simplificarlo agregando el color a la regla .notice. El objetivo no es usar todos los tipos de selectores, sino seleccionar exactamente los elementos que necesitas.

Selecciona atributos y compara sus valores

input[required] { border: 2px solid #087f5b; }
input[type="email"] { background-color: #fff4cc; }
[data-tags~="visit"] { outline: 1px dashed #777; }
a[href^="https://"] { color: #1d4ed8; }

Una dirección https:// puede apuntar al mismo sitio, por lo que ese prefijo no identifica enlaces externos por sí mismo. Del mismo modo, [data-tags="visit"] coincide con el valor completo del atributo y no coincide con garden visit. Usa el operador de comparación adecuado para la condición deseada. Consulta MDN: Selectores de atributos.

Ejecuta el ejemplo completo de selectores

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
* { box-sizing: border-box; }
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    p { color: #333; }
    .notice { background-color: #e9f7ef; padding: 12px; }
    p.notice { border-left: 4px solid #087f5b; }
    .notice.urgent { font-weight: bold; }
    #opening { color: #087f5b; }
    [data-tags~="visit"] { outline: 1px dashed #777; }
    a[href^="https://"] { color: #1d4ed8; }
    input[required] { border: 2px solid #087f5b; }
    input[type="email"] { background-color: #fff4cc; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p id="opening" class="notice" data-tags="garden visit">A: We open at 9am every day.</p>
  <p class="notice urgent">B: In case of rain, the outdoor program will be canceled.</p>
  <p>C: Bring a water bottle and comfortable shoes.</p>
  <div class="notice">D: This is an information box.</div>
  <p><a href="https://example.com/">E: External guidance link</a></p>
  <form>
    <label for="email">Email (required)</label>
    <input id="email" type="email" name="email" required>
    <button type="submit">Request information</button>
  </form>
</body>
</html>

Si guardas y abres con index.html, A·B·D tendrá un fondo claro y un relleno de 12px, y solo A·B correspondiente a p.notice tendrá un borde izquierdo. B tiene ambas clases y se ve en negrita. A coincide con el selector de ID y su texto es verde, y también se crea un contorno punteado debido al valor del atributo visit. C sigue siendo un párrafo regular.

El borde del campo de entrada de correo electrónico se vuelve grueso bajo la condición requerida, y el fondo se vuelve amarillo bajo la condición de tipo. La función real de validación de entrada de required se maneja mediante el atributo HTML, y CSS solo cambia la apariencia del cuadro de entrada. La dirección de enlace externo en el ejemplo es solo con fines ilustrativos. No lo uses como dirección de un servicio real. La forma de seleccionar la existencia de un atributo es diferente de la forma de seleccionar el resultado de la verificación. Estados de Formulario CSS: Enfoque, Validación, deshabilitado y solo lectura compara los selectores de estado required y error juntos.

Cambia las condiciones y predice el resultado

1. Intenta cambiar p.notice a .notice para ensanchar el objetivo del borde izquierdo. El resultado esperado es que el borde que originalmente existía solo en A·B también aparezca en D. Después de la confirmación, vuelve al selector original.
2. Cambia la clase de B a class="urgent". B sigue siendo p, pero pierde la condición de clase notice, por lo que el fondo de guía, el borde izquierdo y el texto en negrita para .notice.urgent desaparecen. La clase urgent por sí sola no satisface el selector compuesto.
3. Cambia el valor de data-tags de A a garden revisit. Como ya no existe la palabra independiente visit, el contorno punteado debería desaparecer. Asegúrate de no confundir visit y revisit como subcadenas.

Para cada ejercicio, guarda el archivo y luego actualiza para comprobar y volver a los valores originales. Si solo el objeto esperado no cambia, compara primero el nombre de la clase·id·propiedad real. Puedes distinguir entre errores de selección y conflictos de prioridad mirando en las herramientas de desarrollo para ver si las reglas coinciden con los elementos seleccionados.