Teoría
Teoría

Selectores de atributos

Ya conoces el atributo class y los selectores de clase. También existen selectores que permiten seleccionar elementos según cualquier atributo.

Se usan mucho al trabajar con formularios, porque sus campos tienen un atributo type con distintos valores.

Los selectores de atributos se escriben con corchetes: elemento[atributo]. Por ejemplo:

input[checked] { ... }
input[type="text"] { ... }

El primer selector selecciona los campos que tienen el atributo checked. El segundo selecciona los campos cuyo atributo type tiene el valor text.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Selectores de atributos</title> <link rel="stylesheet" href="course-5.css"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login" action="https://echo.htmlacademy.ru/courses" method="post"> <label for="academy-login">Nombre de usuario</label> <input type="text" id="academy-login" name="academy-login" required> <label for="academy-password">Contraseña</label> <input type="password" id="academy-password" name="password"> <input type="submit" value="Entrar"> </form> </body> </html>

CSS

ObjetivosRealizado

Asigna background-color: #fcf8e3; al campo que tiene el atributo required.
Asigna background-color: #f2dede; al campo de contraseña.
Asigna border-color: green; al botón.