Teoría
Teoría

Combinación de atributos y estados

Estos nuevos selectores, como los demás, pueden combinarse entre sí y con selectores de otros tipos o pseudoclases. La combinación dependerá de lo que necesites seleccionar.

Por ejemplo:

input[type="checkbox"]:required:checked {}

Este selector selecciona las casillas que son obligatorias y están marcadas en ese momento.

Para quitar una imagen de fondo, usa background-image: none;.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Combinación de atributos y estados</title> <meta charset="utf-8"> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="page-header">Formulario de datos personales</header> <main> <form action="https://echo.htmlacademy.ru/courses" method="post"> <fieldset> <legend>Solicitud de visa para la cocina</legend> <label>Nombre del gato</label> <input type="text" name="name" value="Cupcakecito" required> <label>Número de pasaporte felino</label> <input type="text" name="passport" pattern="[0-9]{3}-[0-9]{5}" placeholder="Formato: XXX-XXXXX" required> <div class="half-width"> <label>Cantidad de invitados</label> <input type="number" name="guests"> </div> <div class="half-width"> <label>Cantidad de platos</label> <input type="number" name="meals" value="3" required> </div> <div class="half-width"> <label>Apodo</label> <input type="text" name="nickname" value="Cupcake"> </div> <div class="half-width"> <label>Firma</label> <input type="text" name="sign" required value="Cupcake"> </div> </fieldset> <div class="buttons"> <input type="submit" value="Enviar"> </div> </form> </main> <footer class="page-footer"></footer> </body> </html>

CSS

input:required { background: url('required.png') no-repeat right 50%; border: 1px solid #e74c3c; }

ObjetivosRealizado

Quita la imagen de fondo de todos los elementos input obligatorios de tipo number.
A todos los elementos input obligatorios con valores válidos, asígnales el color de fondo #94e6b6 y el color de borde #2ecc71.
A todos los elementos input obligatorios con valores válidos y cuyo atributo value contiene la subcadena Cupcake, asígnales el color de texto #ffffff.