CSS fornisce diversi modi per modificare l'aspetto di un elemento. I selettori CSS sono uno di questi, i selettori ci consentono di indirizzare un elemento HTML e specificare uno stile di nostra scelta su qualsiasi elemento HTML.

In CSS ci sono cinque categorie di selettori i.e. Selettore semplice, combinatorio, classe pseudo, elementi pseudo-elementi e attributi. Questo articolo presenta una panoramica dettagliata di uno dei semplici selettori i.e. Selettore di classe e discuterà le seguenti terminologie relative al selettore di classe:

• Cos'è un selettore di classe
• Sintassi di base del selettore di classe
• Come utilizzare il selettore di classe
• Come utilizzare il selettore di classe per alcuni elementi HTML specifici

Iniziamo questa discussione con la definizione di base del selettore di classe:

Selettore di classe in CSS

Un selettore di classe prende di mira gli elementi con nome / i di classe specifico. La seguente sintassi ti fornirà maggiore chiarezza sul selettore di classe.

Sintassi

La sintassi di base inizia con un punto "."Seguito dal nome della classe che rappresenta che è un selettore di classe.

Nella figura sopra "."Mostra che è un selettore di classe CSS," Style "rappresenta il nome della classe.

Come utilizzare il selettore di classe CSS

Il selettore di classe CSS può essere utilizzato per impostare lo stile di alcuni elementi HTML specifici.

Esempio

Diamo un'occhiata al codice di seguito, utilizza il selettore di classe per modellare alcuni elementi HTML specifici.

Selettore di classe CSS

Primo paragrafo

Secondo paragrafo

Il codice sopra utilizza due selettori di classe. IL

e prima

Element usa la stessa classe, quindi lo stesso stile verrà implementato, mentre il secondo

L'elemento verrà disegnato in modo diverso:

Come utilizzare il selettore di classe CSS per elementi HTML specifici

Possiamo utilizzare il selettore della classe CSS per influenzare specifici elementi HTML. A tale scopo dobbiamo specificare il nome dell'elemento prima del punto ".", Come mostrato nella figura seguente:

La figura sopra descrive che selezionare tutti i

elementi che hanno il nome di classe "stile" e impostano il colore di sfondo come blu.

Esempio

In questo esempio, la classe Style1 è specificata

E

elementi. Tuttavia, solo

Gli elementi con l'attributo di classe "style1" possono accedere alle proprietà di styling di Style1 e

L'elemento rimarrà senza manche.

Selettore di classe CSS

Primo paragrafo

Secondo paragrafo

Produzione

Come implementare più stili sull'elemento HTML

Poiché un elemento HTML può avere più nomi di classi nell'attributo di classe in modo da poter applicare uno stile diverso in base ai nomi delle classi.

Esempio

Nel codice seguente il primo paragrafo implementerà le proprietà di entrambe le classi di stile.

Selettore di classe CSS

Primo paragrafo

Secondo paragrafo

Il pezzo di codice sopra genererà il seguente output:

L'output verifica che il primo paragrafo utilizza le proprietà di entrambe le classi "Style" e "Style1".

Conclusione

Un selettore di classe seleziona l'elemento HTML per lo styling in CSS usando il suo nome di classe e inizia con un punto "."Seguito dal nome della classe. Questo articolo presenta una panoramica completa e un concetto fondamentale di selettori di classe CSS, come utilizzare i selettori di classe, come utilizzare un selettore di classe per alcuni elementi HTML specifici con l'aiuto di esempi.