Selettori CSS sono usati per selezionare il contenuto a cui vuoi applicare lo stile . I selettori fanno parte del set di regole CSS. I selettori CSS selezionano gli elementi HTML in base al loro ID, classe, tipo, attributo, ecc.
Esistono diversi tipi di selettori nei CSS.
- Selettore di elementi CSS
- Selettore ID CSS
- Selettore di classi CSS
- Selettore universale CSS
- Selettore di gruppi CSS
1) Selettore elemento CSS
Il selettore di elementi seleziona l'elemento HTML per nome.
p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p> Provalo adesso Produzione:
Questo stile verrà applicato a ogni paragrafo.
Anche io!
E io!
2) Selettore ID CSS
Il selettore id seleziona l'attributo id di un elemento HTML per selezionare un elemento specifico. Un ID è sempre univoco all'interno della pagina, quindi viene scelto per selezionare un singolo elemento univoco.
Si scrive con il carattere cancelletto (#), seguito dall'id dell'elemento.
Facciamo un esempio con l'id 'para1'.
#para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p> Provalo adesso Produzione:
Ciao Javatpoint.com
Questo paragrafo non sarà influenzato.
3) Selettore di classi CSS
Il selettore di classe seleziona gli elementi HTML con un attributo di classe specifico. Viene utilizzato con il carattere punto. (simbolo del punto) seguito dal nome della classe.
Nota: il nome di una classe non deve iniziare con un numero.
Facciamo un esempio con una classe 'centro'.
.center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p> Provalo adesso Produzione:
Ciao Javatpoint.com
Ciao Javatpoint.com (in caratteri più piccoli)
Questo è un paragrafo.