Selettori CSS e loro tipi

I selettori CSS sono una struttura CSS specifica che consente di selezionare un elemento specifico nel codice HTML e di modificarlo. Ognuno di essi ha una sua specificità, cioè può sovrapporsi ad altre proprietà più "deboli".

Selettore CSS per tag e classe

I selettori più semplici sono per tag e per classe. Il selettore di tag è il più comune e seleziona tutti gli elementi con un tag specifico. Ad esempio, è possibile scrivere il seguente codice CSS nelle proprietà: "p {color: blue}", dove "p" è il tag di paragrafo e la proprietà "color: blue" indica il colore del testo. Di conseguenza, il testo in tutti i paragrafi diventerà blu. I selettori di tag possono essere separati da virgole, quindi non sarà necessario scrivere la proprietà due volte.

Se ad alcuni paragrafi viene assegnata una classe, ad esempio "blu", la risposta del selettore CSS può essere configurata in modo ancora più preciso. Ma la sua entrata nelle proprietà sarà diversa - un punto apparirà davanti al nome della classe. Cioè, per selezionare tutti i paragrafi a cui è assegnata la classe "blu" e colorarli di blu, è necessario scrivere il seguente codice nelle proprietà CSS: ".blue: {color: blue}". Questo selettore è più specifico del selettore CSS per tag ed è più forte di esso, ma è uno dei più semplici. Esistono regole più complesse che consentono di selezionare piccoli gruppi di elementi.

Presenta i selettori per ID

I selettori per id o per id sono più specifici che per classe e per attributo. Cioè, quando vengono usati in una cascata, essi "superano" altri selettori simili. Gli identificatori aiutano anche a selezionare accuratamente un elemento specifico nel codice, ma il loro uso nella progettazione di pagine è considerato una cattiva pratica tra i web designer. Solo in casi molto rari, ad esempio quando si crea un cursore su CSS, questa pratica è accettabile. Il fatto è che all'interno di una pagina può esserci solo un elemento con un ID specifico. Di conseguenza, a causa dell'unicità del selettore CSS per id, può essere utilizzato solo per un singolo elemento. In questo caso, è molto più logico utilizzare le classi, piuttosto che gli identificatori.

Opinioni diverse sul selettore di identità

Ma c'è anche l'opinione opposta che l'identificatore aiuta a determinare il frammento di codice sulla pagina, che dovrebbe essere in una singola copia. Allo stesso tempo, anche se i selettori di classe possono sostituirlo, dovrebbero essere utilizzati per gruppi di elementi di grandi dimensioni, e in quei luoghi in cui è richiesta precisione, è meglio usare id. Ogni macchina da scrivere ha il diritto di sviluppare la sua opinione personale su questo tema e scrivere il codice nel suo stile personale. Quando si scrive un selettore sull'ID di fronte ad esso, viene utilizzato il simbolo "#". Cioè, la riga di codice sarà simile a questa: "#blue: {color: blue}". Con tale record, l'elemento con l'identificatore "#blu" sarà dipinto in blu.

Uso in cascata

Quando si utilizzano i selettori CSS per id in HTML, è anche possibile utilizzare la proprietà a cascata. Ad esempio, se è necessario selezionare alcuni tag figlio all'interno del tag con un identificatore e modificarne le proprietà, è necessario prima scrivere il nome dell'identificatore con una griglia, quindi il tag secondario e le sue proprietà. Tali selettori sono chiamati nidificati. Cioè, la riga di codice sarà simile a questa: "#id p {color: blue}". Quindi all'interno dell'elemento genitore con questo identificatore nel paragrafo figlio, il colore del testo diventa blu.

Utilizzare i selettori figlio

Un'altra opzione per utilizzare la cascata per modificare le proprietà degli elementi secondari viene utilizzata se è necessario selezionare solo una parte specifica del codice. È anche chiamato il selettore discendente. Ad esempio, per selezionare un paragrafo all'interno di una riga di una tabella, utilizzare la seguente voce del selettore CSS: "ul li> p: {color: blue}". Vale la pena prestare attenzione al fatto che più lungo è il record, maggiore è la probabilità di poter modificare alcune proprietà specifiche dell'elemento, in quanto diventa più prioritario per la cascata. Ad esempio, gli elementi con qualche altra proprietà di un selettore CSS su una classe che è padre non modificheranno completamente le loro proprietà. Solo una parte specifica del testo all'interno della lista sarà ridipinta.

Sister Element Selector

Un altro modo interessante di usare la cascata è i selettori CSS adiacenti. Sono registrati come la somma dei selettori: "span + a {color blue}". In questo caso, il vicino è quello in cui ce n'è un altro che corrisponde ai parametri necessari. Quindi, se ci sono tre elementi nel codice, allora la proprietà non sarà applicata al primo di essi, perché non ha uno vicino, e tutti quelli successivi, sì. Ciò è dovuto all'icona della somma, quando vengono aggiunti i selettori successivi, non i precedenti. Tale registrazione aiuta a ridurre il codice e a non scrivere diversi selettori CSS per tag diversi, applicando loro le stesse proprietà. Se anche il secondo elemento dell'elenco è impostato su una classe, e il record viene modificato in ".class + a {color blue}", inizierà il conto alla rovescia e le proprietà verranno modificate per gli elementi successivi che corrispondono alla regola e le prime due rimarranno le stesse.

Supponiamo ora che nel nostro codice ci siano tre tag identici con classi diverse e che sia necessario selezionare tutti gli elementi dopo uno specifico. In questo caso, l'applicazione solo dei selettori di tag CSS non sarà di aiuto. Per fare ciò, utilizzare il seguente selettore: ".class ~ div". Questo seleziona elementi con un tag div che segue la classe specificata. Se vogliamo selezionare non solo gli elementi con il tag div, ma tutti quelli successivi, invece del tag dopo il segno tilde, è necessario inserire un asterisco - "*". Tale record significherà che è necessario selezionare tutto ciò che segue dopo una determinata lezione. È possibile selezionare tutti gli elementi della pagina in generale, se si lascia un solo asterisco come selettore.

Selettori di attributi CSS

Supponiamo che nel nostro codice ci siano elementi con alcuni attributi, ma tutti differiscono l'uno dall'altro e sono scritti con un trattino, e dobbiamo selezionare tutti quelli il cui nome di classe inizia con una determinata parola, ad esempio "selettore" e le classi sono separate firmare "-". Cosa fare in questo caso? La voce del selettore inizia con parentesi quadre, dove viene prima scritto il nome dell'attributo, quindi la barra verticale, i segni "=" e "selettore": "data- | = selettore". Quindi, scrivi la proprietà desiderata che desideri modificare. Di conseguenza, viene selezionato un elemento con i parametri specificati. Cambiando le classi, è possibile modificare le proprietà di alcune parti del codice. Se i nomi delle classi non sono scritti da un trattino, ma in una parola, possono anche essere selezionati, ma usando una voce leggermente diversa. In questo caso, la barra verticale viene sostituita dal simbolo "^": "data ^ = selettore". Questo selettore seleziona una sottostringa con l'inizio del nome della classe.

Come selezionare un elemento con un finale definito nel nome della classe

Ora agiremo in modo diverso e scegliamo parti del codice non all'inizio della descrizione della classe, ma delle ultime lettere nel suo nome. Per questo abbiamo bisogno dell'icona del dollaro. Lo mettiamo al posto della casella di controllo, e dopo il segno di uguale scriviamo la fine del nome della classe: "data $ = ctor". Gli elementi con questa combinazione di lettere selezioneranno ora alcune proprietà e le applicheranno. Puoi scegliere qualsiasi attributo. Cerchiamo di analizzare cosa fare se abbiamo bisogno di trovare un elemento con una combinazione di lettere nel mezzo di una parola. In questo caso, cambiamo il simbolo del dollaro in un asterisco, e dopo il segno di uguale scriviamo le lettere necessarie: "data * = ct".

Pseudo-classi - selettori speciali

Per i collegamenti, vengono solitamente utilizzati selettori speciali di stile CSS, che visualizzano i loro vari stati: calmi, focalizzati, attivi, passati - vengono chiamati pseudo-classi. La pseudo-classe per il collegamento attivo su cui punta il cursore è scritta in questo modo: "a: active". Inoltre, ci sono alcune proprietà, più spesso le modifiche in background o un'ombra viene aggiunto. Se aggiungi questa proprietà a un link e fai clic su di esso, cambia il suo colore in quello specificato. Un'altra pseudo-classe - hover mostra che il link è già stato passato. È scritto così: "a: hover".

Caratteristiche degli stati attivi e di messa a fuoco

L'attivo è spesso confuso con un altro stato: l'attenzione. È registrato in questo modo: "a: focus" e indica lo stato attivo del pulsante quando si lavora dalla tastiera. Cioè, se si utilizza il tasto TAB, il collegamento attivo verrà evidenziato con un colore speciale. Questa proprietà deve essere utilizzata, poiché non tutti gli utenti possono utilizzare il mouse per navigare nel sito. Alcuni possono avere problemi di vista o altre restrizioni di salute, quindi si spostano sulla pagina con l'aiuto di tasti o dispositivi speciali. Ignorare lo stato del pulsante messo a fuoco rappresenta un grosso svantaggio per tale parametro nella progettazione del sito Web come accessibilità e ha un impatto significativo sulla sua presenza da parte di una particolare categoria di utenti. Con la normale navigazione del mouse, il collegamento diventa attivo e attivo. Pertanto, quando si tratta di elementi di stile, è importante prestare attenzione a questo.

falso

Gli pseudo-elementi ti consentono di definire stili specifici senza definirli nella struttura HTML stessa. Sono scritti in questo modo: nome del selettore, segno "::", nome pseudo-elemento. Gli elementi più comuni sono "prima" e "dopo". Hanno la proprietà "contenuto", non possono essere applicati agli stili interni. "Dopo" è necessario aggiungere del contenuto dopo il contenuto di un articolo specifico. Ciò che deve essere inserito esattamente viene registrato nella proprietà "content". Allo stesso modo, lo pseudoelemento "prima" aggiunge il contenuto prima del contenuto dell'elemento. L'utilizzo di questi selettori speciali consente di ridurre il codice e di non scrivere una nuova struttura ogni volta per una parte di esso, se è necessario aggiungere un piccolo dettaglio a una posizione specifica nel contenitore. Sono spesso usati quando si disegnano pagine e si aggiungono elementi decorativi. Combinazioni di tutte queste opzioni aiutano a creare effetti insoliti nella pagina e aiutano notevolmente il lavoro del progettista del layout.