Presencia y valores exactos

Lección 12 de 15 del curso Selectores CSS de Coddy.

En esta lección, aprenderás sobre los selectores de presencia de atributo y de valor exacto. Los selectores de atributo se utilizan para seleccionar elementos basándose en la presencia o ausencia de un atributo, o en el valor exacto de un atributo.

Selector de presencia de atributo:

El selector de presencia de atributo se dirige a los elementos que tienen un atributo específico, independientemente de su valor. Se denota utilizando corchetes con el nombre del atributo en su interior.

Ejemplo:

/* Selecciona todos los elementos con un atributo "target" */
[target] {
   color: blue;
}

Selector de valor exacto:

El selector de valor exacto se dirige a los elementos con un atributo específico y un valor de atributo específico. Se denota utilizando corchetes con el nombre del atributo seguido de un signo igual y el valor deseado en su interior.

Ejemplo:

/* Selecciona el elemento con el atributo "data-type" que tiene el valor "important" */
[data-type="important"] {
   font-weight: bold;
}

Ejemplos de código:

HTML:

<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>

CSS:

[target] {
   text-decoration: underline;
}
[data-type="important"] {
   color: red;
}

Estos ejemplos demuestran cómo funcionan los selectores de atributos CSS al seleccionar elementos basándose en la presencia o el valor exacto de sus atributos y aplicándoles los estilos correspondientes.

Desafío

Fácil

Se te ha encomendado la tarea de aplicar estilos a un formulario HTML sencillo utilizando selectores de atributos.

Aplica los siguientes estilos utilizando selectores de atributos:

Añade un borde green a los campos de entrada con el atributo type establecido en "text".
Cambia el color de fondo de los campos de entrada con el atributo type establecido en "email" a lightblue.
Haz que el color de texto de los campos de entrada con el atributo type establecido en "password" sea red.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
    /* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    
    <input type="submit" value="Submit">
</form>
</body>
</html>

Todas las lecciones de Selectores CSS

1Introducción a los selectores CSS

Propósito de los selectores CSS ¿Por qué son importantes?

4Selectores de atributos

Introducción a los selectores de atributosPresencia y valores exactosSelectores de valor de atributo Selectores de valor de atributo II Selectores de valor de atributo III

2Selectores simples

Selectores de tipo Selectores de clase Selectores de ID Selectores universales

3Selectores combinadores

Selector de hijo Selector de descendiente Selector de hermano adyacente Selector de hermano general

Practica por tu cuenta: Playground de Web