Presenza e valori esatti

Lezione 12 di 15 del corso Selettori CSS di Coddy.

In questa lezione imparerai a conoscere i selettori di presenza degli attributi e di valore esatto. I selettori di attributo vengono usati per selezionare gli elementi in base alla presenza o all'assenza di un attributo oppure al valore esatto di un attributo.

Selettore di presenza dell'attributo:

Il selettore di presenza dell'attributo individua gli elementi che hanno un attributo specifico, indipendentemente dal suo valore. Si indica usando parentesi quadre con il nome dell'attributo al loro interno.

Esempio:

/* Seleziona tutti gli elementi con un attributo "target" */
[target] {
   color: blue;
}

Selettore di valore esatto:

Il selettore di valore esatto individua gli elementi con un attributo specifico e un valore specifico per tale attributo. Si indica usando parentesi quadre con il nome dell'attributo seguito da un segno di uguale e dal valore desiderato al loro interno.

Esempio:

/* Seleziona l'elemento con l'attributo "data-type" che ha il valore "important" */
[data-type="important"] {
   font-weight: bold;
}

Esempi di codice:

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;
}

Questi esempi mostrano come funzionano i selettori di attributo CSS: selezionano gli elementi in base alla presenza o al valore esatto dei loro attributi e applicano loro gli stili corrispondenti.

Sfida

Facile

Ti è stato assegnato il compito di applicare stili a un semplice modulo HTML usando selettori di attributo.

Applica i seguenti stili usando i selettori di attributo:

Aggiungi un bordo green ai campi di input con l'attributo type impostato su "text".
Cambia il colore di sfondo dei campi di input con l'attributo type impostato su "email" in lightblue.
Imposta il colore del testo dei campi di input con l'attributo type impostato su "password" su red.

Provalo tu

<!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>

Tutte le lezioni di Selettori CSS

1Introduzione ai selettori CSS

Scopo dei selettori CSS Perché sono importanti?

4Selettori di attributo

Introduzione ai selettori di attributoPresenza e valori esattiSelettori di valori di attributo Selettori di valori di attributo II Selettori di valori di attributo III

2Selettori semplici

Selettori di tipo Selettori di classe Selettori ID Selettori universali

3Selettori combinatori

Selettore figlio Selettore discendente Selettore fratello adiacente Selettore fratello generale

Esercitati da solo: Playground Web