I selettori CSS sono il meccanismo che permette di selezionare specifici elementi HTML in base al loro nome di tag, id, classe, attributo, ecc. Viene poi applicato lo stile definendo le regole CSS.
1. Selettore di elemento: applica lo stile a tutti gli elementi con un determinato nome di tag. Ad esempio, il seguente stile verrà applicato a tutti gli elementi
della pagina:
\`\`\`css p { color: blue; } \`\`\`1. Selettore di classe: applica lo stile a tutti gli elementi con una determinata classe. Si identifica con un punto (.) seguito dal nome della classe. Ad esempio:
\`\`\`css .myClass { color: red; } \`\`\` Questo stile verrà applicato a tutti gli elementi nella classe “myClass”.1. Selettore di id: applica lo stile a un singolo elemento con un determinato id. Si identifica con un cancelletto (#) seguito dal nome dell’id. Ad esempio:
\`\`\`css #myId { color: green; } \`\`\` Questo stile verrà applicato all’elemento con id “myId”.1. Selettore di attributo: Seleziona gli elementi in base ai loro attributi. Ad esempio:
\`\`\`css input[type=“text”] { color: pink; } \`\`\` Questo stile verrà applicato a tutti gli elementi di input di tipo “text”.1. Selettore di discendenti: Seleziona gli elementi che sono discendenti di un determinato elemento. Ad esempio:
\`\`\`css div p { color: orange; } \`\`\` Questo stile verrà applicato a tutti gli elementiche sono discendenti di un elemento
1. Selettore universale : Seleziona tutti gli elementi di un documento HTML. Si rappresenta con l’asterisco (\*). Ad esempio:
\`\`\`css – { margin: 0; padding: 0; } \`\`\` Questo stile resetterà il margine e il padding di tutti gli elementi del documento.Ci sono molti altri selettori (come figlio, fratello adiacente, etc.) e anche combinazioni dei selettori, che danno molta flessibilità nella selezione degli elementi per applicare lo stile. Una buona comprensione dei selettori è fondamentale per lavorare efficacemente con CSS.