Come selezionare un elemento HTML in CSS

Per migliorare l'aspetto delle pagine Web scritte in HTML o XML, i programmatori Web utilizzano le regole CSS per abbellire le loro pagine Web. La sintassi CSS fornisce una vasta gamma di selettori Per selezionare elementi HTML. La selezione degli elementi HTML utilizzando i selettori CSS consentirà al programmatore di migliorare i loro siti Web. In questo tutorial, impareremo un sacco di selettori CSS con cui possiamo selezionare elementi HTML.

Selettori CSS

Un selettore è una regola di base CSS. Questi selettori informano il browser di selezionare particolari elementi HTML e modellarli nel modo specificato.

Sintassi:

H2
Testo-align: centro;
Colore: Aqua;

P
Font-size: 12px;
colore blu;

Come menzionato già ci sono un certo numero di selettori forniti da CSS.

1. Selettori di base
2. Selettore attributo
3. Selettori combinatori
4. Digitare il selettore
5. Selettori di classe pseudo
6. Selettori di pseudo-elementi

Impariamo su di loro in dettaglio.

Selettori di base

Questa categoria di selettori è costituita da alcuni selettori CSS primari.

Selettore degli elementi

Un selettore di elementi viene utilizzato per selezionare elementi HTML sulla base. Per esempio,

H2
Testo-align: centro;
colore blu;

Nell'esempio sopra il selettore degli elementi seleziona

elemento e imposta il suo colore su blu e allinea il testo al centro della pagina/contenitore.

Selettore ID

Poiché ogni elemento può avere un ID univoco, in modo che questo selettore si prenda in considerazione per selezionare l'elemento e assegnare i valori alle sue proprietà. Per selezionare un elemento HTML usando il suo ID, utilizziamo un simbolo Hash (#) seguito da ID.

Nel seguente esempio, il selettore ID seleziona un elemento con ID = "Head1" e regola il suo allineamento a sinistra mentre il colore su Aqua.

#head1
Testo-align: sinistra;
Colore: Aqua;

Selettore di classe

Stili selettori di classe Un elemento HTML sulla base di un attributo di classe specifico. Per selezionare un elemento HTML utilizzando il suo nome di classe, utilizziamo un punto seguito da un nome di classe.

.principale
Testo-align: sinistra;
margine-top: 3px;
margine-bottom: 3px;

Selettore universale

Per selezionare tutti gli elementi di una pagina HTML utilizziamo un selettore universale. È rappresentato da un segno di asterisco (*).

*
Colore: beige;
Testo-align: giustifica;

Raggruppamento del selettore

Ai fini della selezione di tutti gli elementi che si desidera selezionare in modo simile, utilizzare il selettore di raggruppamento.

H1, H2, P
colore nero;
Testo-align: centro;
Font-Family: "Times New Roman", Times, Serif;

Selettore attributo

Un selettore di attributi utilizza nomi di attributi specifici per selezionare elementi HTML.

a [target]
Colore: verde;
Testo-align: centro;

Nell'esempio sopra il selettore IIS che seleziona tutti gli elementi di quello ha un target di attributo. Il selettore degli attributi è ulteriormente diviso in diverse categorie. La tabella seguente li spiega.

Selettori di attributi	Descrizione	Esempio
[attributo = "valore"]	Seleziona elementi con un attributo e un valore particolari.	Div [lang = fr] background-color = rosso;
[Attributo ~ = "Value"]	Seleziona elementi che hanno una parola particolare nel valore dell'attributo.	img [title ~ = “fiore”] bordo: 2px Solid Blue
[Attributo | = "Value"]	Seleziona un elemento con un attributo particolare il cui valore può essere proprio il valore particolare o il valore particolare che viene dopo un trattino (-).	p [lang | = en] size di font: 12px;
[attribut^= "valore"]	Seleziona elementi con attributi con valori che iniziano con un valore particolare.	A [class^= "top"] background-color: rosa;
[Attributo $ = "Value"]	Seleziona elementi con attributi che hanno un valore finale specifico.	img [src $ = cane.jpg] bordo: 2px; giallo solido
[Attributo*= "Value"]	Seleziona un elemento con valore attributo con un valore particolare.	A [href*= "esempio"] color: blu;

Selettori combinatori

Al fine di combinare uno o più tipi di selettori CSS di base, utilizziamo un selettore combinatori. Esistono quattro tipi di selettori di combinatori che sono;

Selettori combinatori	Descrizione	Esempio
Discendente	Seleziona elementi che sono discendenti di un elemento specifico.	Div P colore blu;
Bambino	Seleziona quegli elementi che sono i primi figli di un certo elemento.	div> p colore blu;
Fratello adiacente	Seleziona un elemento che arriva immediatamente dopo un altro elemento particolare.	Div + P colore blu;
Fratello generale	Seleziona tutti quegli elementi che sono i prossimi fratelli di un particolare elemento.	div ~ p colore blu;

Digitare i selettori

I selettori di tipo vengono utilizzati in CSS quando si desidera selezionare tutti gli elementi di un particolare tipo in un documento. Per esempio.

span
Background-color: blu;

Selettori di classe pseudo

I selettori di classe pseudo vengono utilizzati quando si desidera descrivere un particolare stato di un elemento. Sono diverse classi di pseudo.

Pseudo-Classe	Descrizione	Esempio
:collegamento	Stilla un link che non è stato ancora visitato.	A: Link Color: Aqua;
: visitato	Stilla un link che è già stato visitato.	A: visitato Color: Green;
: Hover	Stilla un elemento quando il mouse si libra su di esso.	A: Hover Color: Pink
: acitve	Stilla un collegamento attivo.	A: Active Color: Blue;
:messa a fuoco	È usato per modellare elementi con focus.	P: Focus Background-color: Purple;
:Primogenito	È usato per modellare il primo figlio di un elemento specifico.	P: First-Child Color: Blue;
:ultimo bambino	Corrisponde a tutti quegli elementi che è l'ultimo figlio del suo genitore.	P: Last-Child Font-size: 6px;
: Lang	Specifica il linguaggio di un particolare elemento.	D: Lang (Eng) Quotes: “-” “-”;

Selettori di pseudo-elementi

Al fine di modellare alcune parti specifiche di un elemento di elementi pseudo-elementi. Gli elementi degli pseudo sono i seguenti;

Pseudo-elementi	Descrizione	Esempio
::prima linea	È usato per modellare la prima riga di un testo.	P :: First-Line Font-size: 6px: Color: Red;
::prima lettera	È usato per modellare la prima lettera di un testo.	P :: First-Letter Font-Weight: 7px; colore blu;
::Prima	Aggiunge contenuto prima di un elemento.	p :: prima img = "fiore.jpg ”;
::Dopo	Aggiunge contenuto dopo un elemento.	p :: dopo img = "fiore.jpg ”;
:: marcatore	È usato per modellare i marcatori di un elenco.	:: marcatore color: rosso; Font-Weight: 2px;
::selezione	È usato per modellare parte di un elemento.	:: selezione sfondo: blu; Font-size: 2px;

Conclusione

Per selezionare un elemento HTML in CSS, CSS fornisce selettori per informare il browser per selezionare particolari elementi HTML e modellarli nel modo specificato. CSS fornisce numerosi selettori. Qui abbiamo fornito un elenco di alcuni: selettori di base, selettore degli attributi, selettore tipo, selettori combinatori, selettori di classe pseudo, selettori di elementi pseudo. In questo tutorial, abbiamo esplorato varie categorie di selettori CSS e come usarli.