Come non selezionare il primo figlio in CSS

Nelle applicazioni Web, i selettori vengono utilizzati per modellare elementi HTML specifici tramite CSS. Ad esempio, quando hai molti contenuti sulla tua pagina ed è necessario selezionare alcuni elementi, dovresti scegliere i selettori CSS. In CSS, una varietà di selettori ti aiuterà a selezionare l'elemento specifico dal gruppo di elementi.

In questo articolo, tratteremo come non selezionare il primo figlio in CSS.

Come non selezionare il primo figlio in CSS?

In CSS, per non selezionare il primo figlio, è possibile utilizzare i selettori forniti:

• : NOT (: primo figlio)
• : non (: nth-of-type (1))
• : NOT (: primo tipo)

Quindi iniziamo!

Metodo 1: Usa: NOT (: primo figlio) per non selezionare il primo figlio

IL ": NOT (: primo figlio)"Il selettore definisce la regola che non seleziona il primo figlio del tag genitore. Questo selettore ci aiuterà ad escludere lo stile CSS applicato per il primo elemento.

Facciamo un semplice esempio e scopriamo come possiamo applicare il selettore per non selezionare il primo figlio.

Esempio

Ecco tre testi di ancoraggio sulla nostra pagina che hanno un colore verde. Escludiamo il colore verde solo per il primo elemento di testo:

Abbiamo specificato il tag di ancoraggio "" nel "<corpo> "Del tuo file HTML:

Il mio primo link

Il mio secondo link

Il mio terzo link

Successivamente, utilizza il tag genitore che è "corpo"E il tag bambino che è"UN" insieme a ":NOT (: primo figlio))"Selettore all'interno del foglio di stile. Quindi, aggiungi il CSS "colore"Proprietà con il valore"verde"; Il colore verrà applicato su tutti gli elementi tranne il primo figlio:

Ora, salva il codice aggiunto e aprilo nel browser semplicemente o utilizzando Live Server:

Come puoi vedere, abbiamo applicato il colore solo a tutti gli elementi tranne il primo:

Metodo 2: USA: NOT (: nth-of-type (1)) per non selezionare il primo figlio

IL "NOT (: nth-of-type ())"Il selettore consente di scegliere uno o più di un elemento nella sequenza. Se solo (: nth di tipo (1)) viene utilizzato, il selettore selezionerà il primo figlio; Tuttavia, quando: non viene posizionato prima, il primo figlio sarà escluso.

Chiariamo: non (: nth-of-type (1)) concetto usando l'esempio seguente.

Esempio

Qui, imposteremo il "NOT (: nth-of-type (1))"Selettore, dove"1"Rappresenta che il primo figlio sarà escluso. Successivamente, assegna il “colore"Proprietà un valore di"arancia":

Produzione

Metodo 3: Usa: NOT (: primo tipo) per non selezionare il primo figlio

Il selettore (: primo tipo) corrisponderà alla prima occorrenza di un elemento e: non viene aggiunto dietro di esso come ": NOT (: primo tipo)"Per saltare il primo occorrenza.

Esempio

In questo esempio, il ": NOT (: primo tipo)"Il selettore verrà applicato per escludere il primo figlio del suo genitore. Quindi, imposta il valore "blu" per il "colore" proprietà:

Ti abbiamo fornito suggerimenti su come non selezionare il primo figlio con successo.

Conclusione

Per non selezionare il primo figlio, usa ": NOT (: primo figlio)",":NOT (: nth-of-type (1))" O ":NOT (: primo tipo)"Selettori. Senza usare: no, questi selettori selezioneranno solo il primo figlio e salteranno altri. Tuttavia, quando: non viene posizionato prima di questi selettori, sarà quindi tenuto a saltare solo il primo figlio del suo genitore. In questo articolo, abbiamo coperto tre metodi efficienti per non selezionare il primo figlio in CSS.