“Hai mai visto alcuni genitori ignorare il loro figlio mentre il resto gioca perché quel bambino è il maggiore o qualcosa del genere? Questo di solito accade con il bambino maggiore perché i genitori pensano che potrebbe non aver bisogno di tanta attenzione. Se lo hai fatto, il concetto di non primo tipo non sarà difficile da capire. Il selettore di primo tipo CSS è stato usato per ignorare semplicemente il primo figlio di un genitore specifico e selezionare il resto degli elementi figlio di quel particolare genitore. In altre parole, deve scegliere ogni elemento che non è il primo discendente dell'elemento genitore. Nel formato del primo componente), viene mostrato come parametro. All'interno di questo articolo oggi impareremo a utilizzare la proprietà per figlio non prima di CSS."

Esempio 01

Iniziamo con il primo esempio di questo articolo creando un formato di file HTML standard usando i tag. Abbiamo iniziato questo script HTML con il tag HTML che è stato seguito dal tag Head. Il tag principale ha definito l'intestazione della nostra pagina web HTML. Quindi, abbiamo usato il tag del titolo per aggiungere il nome per questa pagina. Dopo la chiusura di un tag del titolo, abbiamo utilizzato il tag del titolo all'interno del tag Head. Dai un'occhiata al tag principale dopo la discussione sul corpo di questa pagina HTML.

All'interno del tag del corpo, l'abbiamo avviato con la semplice intestazione della taglia 1. Insieme a questo, abbiamo usato il "DL" per creare un elenco di descrizione. All'interno di questo elenco di descrizione, un totale di 2 specifiche di descrizione sono state utilizzate secondo i tag "DT" che si aprono e si chiudono alla riga 13 e 17. I tag "DD" di descrizione della definizione vengono utilizzati per rappresentare gli elementi da un elenco di descrizione, i.e., alle righe 14, 15, 16, 18 e 19. L'elenco di descrizione è stato chiuso dopo aver aggiunto gli elementi di descrizione. Il corpo della nostra pagina HTML è stato completato. Quindi, abbiamo chiuso l'etichetta del corpo, io.e., . Ora, daremo un'occhiata al tag di stile del nostro tag uomo uomo per modellare il corpo del nostro codice HTML. La specifica di descrizione "DT" è stata disegnata con il peso del carattere di grassetto, grande dimensione del carattere, famiglia dei caratteri serif e dimensioni del carattere di 25px. I tag di descrizione della definizione sono disegnati con il margine 4px e la dimensione del carattere di 22px.

Per i tag "DD", abbiamo usato l'offset "NOT" (primo tipo) per modellare tutti i suoi figli tranne il primo bambino immediato. Abbiamo aggiunto la dimensione del carattere di 18px e il bordo del solido 3px del colore verde giallo. Ora, questo stile verrebbe applicato solo al resto dei tag per bambini del tag "DD" senza lo stile del suo primo figlio o membro. Si tratta del tag di stile e di questa pagina HTML. Quindi, dobbiamo salvarlo e quindi eseguirlo con l'opzione di esecuzione del codice Visual Studio.

Dopo aver eseguito questo script HTML all'interno del browser Chrome, siamo stati mostrati sotto l'output dell'elenco di descrizione. L'intestazione è stata visualizzata senza alcun stile, mentre l'elenco di descrizione ha visualizzato un totale di due descrizioni specifiche elenchi principali elementi, i.e., Animali e animali marini. Le principali specifiche di descrizione sono più grandi del resto degli elementi dell'elenco come specificato dal tag di stile. Allo stesso tempo, le descrizioni delle definizioni "DD" sono state disegnate in modo diverso.

L'articolo adiacente al numero 1 è un po 'più grande del resto degli articoli. Insieme a ciò, tutti gli oggetti hanno avuto un bordo di colore verde giallo intorno a loro, ma il primo oggetto è stato lasciato invariato perché è il primo figlio, e dovrebbe essere evitato secondo l'offset CSS non di tipo non primo di tipo usato nello stile etichetta.

Esempio 02

Iniziamo con un altro esempio di CSS, non con un selettore di offset di primo tipo, insieme ad altri selettori per fare un confronto. Quindi, abbiamo iniziato questo codice HTML con il formato HTML standard di tag, i.e., A partire da un semplice tag HTML, seguito dal tag della testa e del corpo. Dai un'occhiata alla parte del corpo principale di questa sceneggiatura HTML attraverso il tag del corpo, i.e., . Si inizia con l'uso del tag di intestazione

delle dimensioni più grandi e si chiude

con un po 'di testo in entrambi i tag.

Successivamente, contiene una sezione "div" per creare un nuovo contenitore all'interno dell'area del corpo HTML con la classe "genitore" specificata per essere utilizzata per lo stile. Questo contenitore di div avrebbe alcuni paragrafi e titoli al suo interno. L'intestazione di questo contenitore sarebbe di taglia 1, a partire da

e finire con

. Dopo questo, contiene un totale di 4 paragrafi al suo interno con l'uso dell'inizio

taggare e concludere

etichetta. Dopo che tutti i paragrafi sono stati completati e chiusi, abbiamo usato il tag per chiudere il contenitore per un ulteriore inserimento di elementi qui. Il corpo di questo tag HTML è stato completato qui in quanto ha usato il tag per chiudere la parte del corpo. Diamo un'occhiata all'intestazione di questa pagina HTML aggiungendo il titolo a questa pagina con l'aiuto di un tag "titolo" all'interno del tag principale "Head" di HTML. Dopo questo, abbiamo utilizzato il tag "stile" di HTML CSS per aggiungere un po 'di stile al corpo della nostra pagina HTML. Quindi, è stato avviato con la classe "genitore" e il selettore "primo bambino" per aggiungere stile al primo figlio del particolare elemento "div" che è stato specificato con la classe "genitore".

Ora, l'intestazione di questo contenitore "div" sarebbe colorato blu con lo stile del carattere obliquo e la famiglia di carattere corsivo. Abbiamo usato il tag di paragrafo "P" con il selettore di primo tipo per aggiungere lo styling al primo paragrafo dal resto dei paragrafi. Conterrebbe uno sfondo di mandorle sbiancate e una dimensione del carattere di 2.25em. Ora, la stessa classe genitore viene utilizzata con il selettore "NOT (: primo tipo)" per modellare tutto lo stesso tipo di elementi figlio, i.e., "P" tranne il primo figlio del contenitore "Div". Tutti quegli elementi sarebbero verde marino con caratteri più grandi e famiglie di carattere diverse.

Inoltre, il selettore dell'ultimo figlio è stato usato per modellare l'ultimo figlio della sezione "Div", che è anche un paragrafo. Sarà colorato arancione con uno stile di carattere normale e una famiglia di carattere diversa. Lo stile è stato completato qui. Ora lo eseguiremo per vedere le modifiche.

L'output non mostra alcuna stile per la prima intestazione, prima intestazione di colore blu obliquo del contenitore "Div", il primo paragrafo verrebbe disegnato con lo sfondo rosa chiaro, i due paragrafi successivi sono colorati con colore verde marino e l'ultimo paragrafo è Arancione colorato.

Conclusione

Questo articolo contiene una breve spiegazione del selettore CSS, non di tipo. Per questo, ne abbiamo discusso l'uso e l'applicazione sugli elementi CSS all'interno del paragrafo introduttivo. Dopodiché, l'abbiamo implementato in alcuni esempi di script HTML per mostrare il suo funzionamento. Insieme a ciò, abbiamo anche coperto il suo confronto con alcuni selettori di fratelli per rendere il suo funzionamento più chiaro e prominente.