CSS: Qualche Trucco Con I Selezionatori

I CSS (Cascading Style Sheets) sono una parte fondamentale per ogni sito o pagina web. Fin dalla loro introduzione gli sviluppatori hanno cominciato a fare un uso massiccio in quanto permettevano di mantenere un maggior ordine e pulizia all’interno della pagina “strutturale” del proprio codice e delegare ad un file esterno la gestione degli elementi grafici. L’introduzione dei CSS ha inoltre permesso una maggiore collaborazione e un più semplice dialogo con chi cura la grafica delle pagine web, spesso grafici senza particolari conoscenze tecniche in fatto di programmazione, permettendo ai programmatori di delegare la gestione di un foglio che si occupi solamente della grafica senza dover condividere del codice che una persona meno esperta potrebbe compromettere.

Inizialmente i CSS possono sembrare molto semplici ed intuitivi, ma se si vuole sfruttare appieno tutte le potenzialità offerte da questa tecnologia, le cose cominciano a farsi un pochino più complicate e spesso bisogno avere moltissima precisione per poter raggiungere al meglio il risultato desiderato.

Alcuni Semplici Trucchi sull’Utilizzo dei Selezionatori

Oggi vediamo alcuni trucchetti su come utilizzare al meglio i selezionatori del CSS, ovvero quelle “stringhe” che indicano quali oggetti debbano adattarsi alle caratteristiche che andranno specificate in seguito. Si parte dal presupposto che si conoscano i selezionatori semplici per tag, id e classe.

tag1#id1{ color: #fff; }

.class1.class2{ color: #fff; }

Accostando senza alcun spazio ne segno di punteggiatura diversi selezionatori si può definire un sottogruppo di oggetti aventi tutte le caratteristiche specificate, naturalmente non è possibile selezionare più di un id o più di un tag alla volta (in quanto un elemento non può avere due div ne tantomeno essere due differenti tag contemporaneamente). Questa funzione è molto comoda se si deve ad esempio definire alcuni tag di un certo tipo ma solo aventi una determinata categoria.

#id2 .class1 { color: #fff; }

Separando diversi gruppi di selezionatori (ognuno dei quali può anche essere definito come nel caso sopra riportato) è possibile selezionare un certo tipo di elementi e solo se figli di un determinato genitore, nell’esempio riportato vengono selezionati gli elementi aventi classe class1 solo se figli dell’elemento id2 (non per forza figli diretti)

.class1, .class2, #id2, tag1 { color: #fff; }

Separando con la virgola vari selezionatori (di qualunque tipo essi siano, anche costruiti componendo le due metodologie sopra riportate) è possibile definire una volta sola delle caratteristiche che verranno applicate a tutti i tipi di elementi elencati. Si ricorda che ogni elemento può essere ridefinito più di una volta, e infatti comodo molte volte definire alcune caratteristiche generali ad alcuni tipi di elementi per poi ridefinirne alcuni particolari in seguito.

© 2008 Ziogeek.com

Tag: , , , , ,