Introduzione ai tipi di selettori CSS
I tipi di selettori CSS vengono utilizzati per scegliere il contenuto che vogliamo modellare. Aiuta a selezionare gli elementi in base alla loro classe, ID, tipo, ecc. Un selettore CSS è un componente del set di regole CSS.
Tipi di selettori CSS
Ci sono 5 varietà di selettori CSS disponibili per noi. Esamineremo i seguenti importanti selettori CSS:
- Selettore universale CSS.
- Selettore di elementi CSS.
- Selettore ID CSS.
- Selettore di classe CSS.
- Selettore attributi CSS.
1. Selettore universale CSS
In una pagina HTML, il contenuto dipende dai tag HTML. Una coppia di tag definisce un elemento specifico della pagina Web. Il selettore universale CSS seleziona tutti gli elementi in una pagina Web.
Esempio:
* (
color: blue;
font-size: 21px;
)
Queste due righe di codice racchiuse tra parentesi graffe influenzeranno tutti gli elementi presenti nella pagina HTML. Dichiariamo un selettore universale con l'aiuto di un asterisco all'inizio della parentesi graffa. Il selettore universale può essere utilizzato insieme agli altri selettori in combinazione.
2. Selettore di elementi CSS
Il selettore di elementi CSS è anche noto come selettore di tipo. Il selettore di elementi nei CSS tenta di abbinare gli elementi HTML con lo stesso nome. Pertanto, un selettore di
- corrisponde a tutti
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- Domande di intervista CSS
- SASS vs SCSS
- Domande di intervista SASS
- Esempi di elenco ordinato HTML
- elementi cioè tutti gli elenchi non ordinati in quella pagina HTML.
Vediamo un esempio per il selettore di elementi.
ul (
border: solid 1px #ccc;
)
Per capirlo meglio, diamo un'occhiata a un codice HTML di esempio per applicare il codice CSS che abbiamo scritto sopra.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Testo dimostrativo
In questo esempio, troveremo principalmente tre elementi, vale a dire il
- elemento, il tag e un altro
- elemento. Dal momento che il nostro codice CSS si applica al
- tag specificamente, le modifiche al bordo saranno fatte solo per il nostro
- tag e non per i tag. Di solito, queste modifiche non si applicano al contenuto di
- anche tag, ma in alcuni scenari, gli stili possono essere applicati agli elementi interni.
3. Selettore ID CSS
Il selettore ID CSS aiuta lo sviluppatore ad abbinare l'ID creato dallo sviluppatore al suo contenuto di stile. Selettore ID viene utilizzato con l'aiuto del segno hash (#) prima del nome ID dichiarato dallo sviluppatore. Il selettore ID corrisponde a ogni elemento HTML con un attributo ID con il valore uguale a quello del selettore, senza il segno hash.
Ecco un esempio:
#box (
width: 90px;
margin: 10px;
)
Questo codice CSS può essere utilizzato per abbinare l'elemento con l'id 'box', come nella frase seguente.
Qui, il tag è solo un esempio. Possiamo scrivere l'attributo ID per qualsiasi tag HTML. Il selettore ID corrisponde all'attributo ID all'interno dell'elemento e cerca il suo stile. Nel nostro esempio, lo stile si applica fintanto che qualsiasi elemento contiene l'attributo ID 'box'.
Il valore dell'ID utilizzato dovrebbe essere unico. Se lo stesso ID viene utilizzato per due o più elementi, il codice non è tecnicamente valido, ma lo stile dell'elemento verrà comunque applicato, pertanto di solito viene evitato lo stesso ID.
Dover usare un ID diverso ogni volta per ogni pagina HTML, è piuttosto rigido. Oltre ad affrontare problemi di rigidità, i selettori di ID nei CSS affrontano anche il problema della specificità.
4. Selettore di classe CSS
Il selettore di classe CSS è uno dei selettori più utili di tutti i selettori. Viene dichiarato utilizzando un punto seguito dal nome della classe. Questo nome di classe è definito dal programmatore, come nel caso del selettore ID. Il selettore di classe cerca ogni elemento con un valore di attributo con lo stesso nome del nome della classe, senza il punto.
Esempio:
.square (
margin: 20px;
width: 20px;
)
Questo codice CSS può essere usato per abbinare l'elemento che ha il quadrato della classe, come nella frase seguente.
Questo stile si applica anche a tutti gli altri elementi HTML che hanno un valore di attributo per la classe come 'quadrato'. Un elemento con lo stesso valore di attributo di classe ci aiuta a riutilizzare gli stili ed evita inutili ripetizioni. Inoltre, il selettore di classe è utile perché ci consente di aggiungere diverse classi a un particolare elemento. È possibile aggiungere più di una classe all'attributo separando ogni classe con spazio.
Esempio:
Qui quadrato, grassetto e forma sono tre diversi tipi di classi.
5. Selettore attributi CSS
Il selettore Attributo CSS modella il contenuto in base all'attributo e al valore dell'attributo indicati tra parentesi quadre. Nessuno spazio può essere presente prima della parentesi quadra di apertura.
input(type="text") (
background-color: #fff;
width: 100px;
)
Questo codice CSS corrisponderebbe al seguente elemento HTML.
Allo stesso modo, se il valore dell'attributo 'tipo' cambia, il selettore di attributi non lo corrisponderebbe. Ad esempio, il selettore non corrisponderebbe all'attributo se il valore di "tipo" cambia da "testo" a "invia". Se il selettore di attributo viene dichiarato solo con l'attributo e nessun valore di attributo, corrisponderà a tutti gli elementi HTML con l'attributo "tipo", indipendentemente dal fatto che il valore sia "testo" o "invia".
Esempio:
input(type) (
background-color: #fff;
width: 100px;
)
Possiamo anche utilizzare selettori di attributi senza alcuna specifica di un valore al di fuori delle parentesi quadre. Questo ci aiuterà a scegliere come target solo l'attributo, indipendentemente dall'elemento. Nel nostro esempio, sceglierà come target in base all'attributo 'tipo', indipendentemente dall'elemento 'input'. I selettori CSS ci aiutano a semplificare il nostro codice e ci consentono di utilizzare e riutilizzare lo stesso codice CSS per vari elementi HTML. Ci aiutano a definire segmenti e parti specifici della nostra pagina Web. Ci offrono la possibilità di dare uno stile uniforme a elementi simili nella nostra pagina web. I selettori CSS sono quindi una parte importante della curva di apprendimento dei CSS.
Articoli consigliati
Questa è stata una guida ai tipi di selettori CSS. Qui discutiamo con esempio i diversi tipi di selettori CSS. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -