CSS Tilde

In CSS, il tilde è un simbolo della linea di wase che è rappresentato come "~". Si chiama anche "combinator di fratellastri successivi". Usiamo questo combinatori di tilde o successivo fratellastro per separare due selettori composti. Per dirla in altro modo, possiamo dire che il selettore Tilde sceglie tutti i fratelli dell'elemento dell'elemento specificato. In questo tutorial, discuteremo del funzionamento del selettore Tilde. Useremo questo selettore tilde nei nostri codici e ti dimostreremo come funziona.

Esempio 1:

Per l'utilizzo di questo selettore Tilde in CSS, dobbiamo prima creare un file HTML e collegare questo file con il nostro file CSS in cui useremo il selettore Tilde. In questo esempio, stiamo creando un Div e in questo Div, abbiamo un titolo e due paragrafi e un tag "HR" tra questi due paragrafi. Questo tag "HR" viene utilizzato per rappresentare una pausa tematica tra i paragrafi. Ora, dopo il completamento di questo codice HTML, passeremo al file CSS in cui utilizziamo questo selettore Tilde.

Di seguito è riportato il nostro codice CSS, in cui modelliamo l'intestazione cambiando il suo "colore" in "verde" e allinearlo nel "centro" utilizzando la proprietà "allineate al testo". Abbiamo anche cambiato la sua "famiglia di carattere" e abbiamo messo in "algerino". Dopo aver accusato l'intestazione, stiamo usando il selettore Tilde. Il primo elemento è il "HR" e il secondo è "P". Stiamo usando questo selettore Tilde per selezionare tutti i paragrafi che sono preceduti dalla "HR" e quindi applicando alcune proprietà di stile a questi paragrafi. Allineiamo il testo per "giustificare" e impostiamo il colore dello sfondo usando la proprietà "color sfondo" e utilizziamo il "blu in polvere" per questo. La proprietà "Size di carattere" viene inoltre utilizzata e dà il valore di "120%" a questa proprietà. Quindi, "Algerian" è selezionato come "Font-Family". Tutte queste proprietà si applicheranno ai paragrafi che sono preceduti dalla "HR".

Guarda l'output di seguito, tutte le proprietà che abbiamo usato sopra nel file CSS sono applicate solo al paragrafo che è preceduto dalla "HR". Il paragrafo di cui sopra rimane invariato ma il secondo paragrafo dopo la "HR" è cambiato e tutto lo stile viene applicato a questo paragrafo. Questo è solo a causa del selettore Tilde.

Esempio n. 2:

Qui, abbiamo messo un div. In questo Div, abbiamo messo due paragrafi e una intestazione. Dopo questo, inseriamo un altro div in questo primo div e mettiamo un paragrafo e chiudiamo questo secondo div. Al di fuori del secondo div, stiamo mettendo un altro paragrafo e dirigendo. Poi chiudendo il primo div qui. Dopo aver chiuso il primo Div, di nuovo ha messo due paragrafi. E poi chiudere l'etichetta del corpo.

Qui, mettiamo il selettore Tilde e posizioniamo "P" come primo elemento e anche "P" come secondo elemento, quindi scriverlo come "p ~ p". Significa che la prima "p" è preceduta dalla seconda "p". Selezionerà tutta la "p" che è seguita dalla prima "p". Tutta la seconda "p" che è seguita dalla prima "p" è disegnata di conseguenza. Usiamo la proprietà "Color" che imposta il colore del carattere del paragrafo e impostato su "Black". La dimensione del carattere che stiamo impostando qui è "20px". Stiamo utilizzando la parola chiave "audace" come valore di "font-peso". E selezionando il "Calibri" "Font-Family" per questo. Il "colore di sfondo" apparirà in "Light Coral" perché stiamo selezionando questo colore qui come "colore di sfondo".

Puoi notare nell'output di seguito che tutti i secondi paragrafi seguiti dal primo paragrafo sono in stile poiché abbiamo usato il selettore tilde per questo. Utilizzando il selettore Tilde, selezioniamo tutti i secondi paragrafi che precedono il primo paragrafo.

Esempio # 3:

In questo codice, abbiamo un div e poi un elenco non ordinato al di fuori del div. Dopo aver chiuso questo elenco, scriviamo un paragrafo usando tag "P" e quindi creiamo un secondo elenco al di sotto di questo paragrafo. Quando questo secondo elenco termina, scriviamo un intestazione usando tag "H2". Dopo questa intestazione, abbiamo un altro elenco. Tutti gli elenchi sono elenchi non ordinati qui.

Stiamo usando "P" e quindi il selettore Tilde. Dopo il selettore Tilde, abbiamo "UL", il che significa che seleziona tutto "UL" che è preceduto dalla "P". Usiamo alcune proprietà di stile per dare stile alla "UL" per chiarire la differenza per te come questo tilde seleziona gli elementi e applicherà lo stile dato agli elementi selezionati. Per prima cosa utilizziamo la proprietà "colore" e impostiamo "verde" per il colore del testo. Quindi, gli elementi selezionati renderranno in un colore "verde". Stiamo anche aumentando la "dimensione del carattere" a "22px" e stabilendo la "famiglia di carattere" su "algerina". Impostamo il "colore di sfondo" in forma RGB e lo imposta come "RGB (235, 235, 125)" che sembra un colore giallo.

Qui, l'output mostra che il primo elenco è semplice e non vi è alcuna modifica nel primo elenco che non è selezionato in quanto è presente prima del paragrafo e non è preceduto da "P". Gli altri due elenchi sono disegnati in quanto entrambe le liste sono precedute dalla "P". Queste due elenchi sono presenti dopo il paragrafo, quindi vengono selezionati e quindi disegnati.

Esempio # 4:

Puoi vedere qui abbiamo creato un div e un'intestazione dentro questo. Poi due paragrafi fuori da questo div. Sotto questo, abbiamo un altro div e ci siamo diretti come sopra e creato due paragrafi.

Usiamo il "div" come primo selettore e poi tilde e poi "p" come secondo selettore. Ci vorranno tutti i paragrafi seguiti dal div. Lo "sfondo" che abbiamo impostato qui è "RGB (111, 212, 111)" che è un colore verde chiaro. Utilizziamo "blu" come "colore" in modo che il testo apparirà "blu". Lo allineiamo anche al "centro" della linea. E "Georgia" è la sua "famiglie di carattere" come abbiamo selezionato qui. Abbiamo anche "grassetto" questo testo usando "grassetto" come valore di "font-peso". La "dimensione del carattere" è "25px" questa volta ed è anche "corsivo" in "in stile font".

Tutti i paragrafi sono selezionati nell'output perché tutti i paragrafi sono preceduti dal div . Quindi, seleziona tutti i paragrafi e possiamo vedere che tutte le proprietà che abbiamo utilizzato sono applicate a questi paragrafi. Il selettore Tilde aiuta a selezionare tutti i paragrafi seguiti dal div e applicare proprietà all'interno delle parentesi graffe di questo.

Conclusione:

Abbiamo presentato questo tutorial per l'apprendimento del selettore Tilde in CSS. Qui, abbiamo discusso di ciò che è il selettore Tilde e come utilizzare questo selettore Tilde in CSS e come funziona. Abbiamo inserito il primo selettore e quindi il selettore Tilde e quindi il secondo selettore. Come abbiamo spiegato che seleziona il secondo selettore che è seguito dal primo selettore con l'aiuto del selettore Tilde. Abbiamo dimostrato più esempi qui in questo tutorial.