class multiple come trovare in un foglio css

[ondertol]

Ciao a tutti,
sto provando a effettuare un programma che leggendo una pagina html accede al rispettivo file css per cercare la formattazione applicata ad una class. Ma ho qualche difficoltà quando le class che trovo nella pagina html sono più di una.

su internet ho trovato questa spiegazione:

"dichiarazione di classi multiple:
p.testorosso.grassetto {color:red; font-weight:bold;}
Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunqueordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questiparagrafi:

<p class="grassetto testorosso maiuscolo">..</p>
<p class="testorosso grassetto">...</p>


ma non questo, perchè solo uno dei nomi è presente come valore di class:

<p class="grassetto">...</p> "

Ma quindi come faccio ad individuare ad esempio la class="grassetto testorosso maiuscolo" nel file .css? come devo cercarla visto che anche la presenza di "maiuscolo" farà applicare la regola color:red; font-weight:bold;?
io pensavo di cercare in qualsiasi ordine tutte le parole che compongono la class anteposte dal punto e separate da uno spazio:

.grassetto .testorosso .maiuscolo

ma così non troverei nulla... come devo procedere quindi?

Grazie

[KillerWorm]

Ciao e benvenuto, da ciò che hai scritto noto che hai diverse lacune sui concetti fondamentali del CSS, forse anche per questo è difficile capire cosa stai cercando di fare e cosa vorresti ottenere esattamente.

Cerchiamo di chiarire:

sto provando a effettuare un programma che leggendo una pagina html accede al rispettivo file css

Cosa intendi per "effettuare un programma"?
Di che linguaggio stiamo parlando?

per cercare la formattazione applicata ad una class

In che senso "cercare la formattazione"?
Qual è lo scopo di questa ricerca?

Ma quindi come faccio ad individuare ad esempio la class="grassetto testorosso maiuscolo" nel file .css?

Le indicazioni che hai trovato su internet sono corrette ma non per forza le classi applicate sul markup HTML corrispondono a delle regole CSS. Non c'è una corrispondenza biunivoca. Ogni elemento, che abbia delle classi o no, può essere formattato (o no) con del CSS in svariati modi e con svariate regole che peraltro potrebbero risiedere in fogli di stile diversi.

Se ti interessa verificare quali regole CSS sono applicate ad un determinato elemento puoi usare la console web del tuo browser, che in sostanza ti mostra cosa avviene dietro le quinte. Diversamente cerca di chiarire meglio il contesto e quale obiettivo stai cercando di raggiungere; per gli altri risulterà più semplice darti qualche consiglio e, per te, riceverlo.

[ondertol]

Ciao

Cosa intendi per "effettuare un programma"?
Di che linguaggio stiamo parlando?

in sostanza si tratta di un programma che legge le pagine html di un determinato gruppo di siti internet e deve accedere ai relativi .css per capire come sono formattati. In delphi o c.

In che senso "cercare la formattazione"?
Qual è lo scopo di questa ricerca?

nel senso che se nella pagina html ad esempio trovo un <p class"prova"> accedendo al file .css vado a cercare ".prova {color: red }" e uso quanto scritto tra parentesi graffe per capire che il paragrafo avrà caratteri rossi.

Il problema è quando mi trovo con una definizione del tipo <p class="testorosso grassetto maiuscolo" come devo cercare nel file .css i relativi .testorosso .grassetto .maiuscolo visto che potrebbero essere stati scritti in n modi diversi? Ad es.

.testorosso .grassetto .maiuscolo {font-size:10px}

oppure solo con
.testorosso .grassetto {font-size:10px}
in questo caso devo aspettarmi di trovare anche un .maiuscolo {...}?


oppure come
.testorosso {...}
.grassetto {...}
.maiuscolo {...}

oppure come
.maiuscolo .testorosso {...}
e poi .grassetto { ... }

ecc ecc... una infinità di combinazioni.... ?

per imparare cosa è un "markup HTML"?

spero di essermi spiegato un poco...

[KillerWorm]

nel senso che se nella pagina html ad esempio trovo un <p class"prova"> accedendo al file .css vado a cercare ".prova {color: red }" e uso quanto scritto tra parentesi graffe per capire che il paragrafo avrà caratteri rossi.

Purtroppo non è così semplice come lo stai immaginando. Tutti gli elementi HTML che vengono visualizzati nel browser subiscono una particolare formattazione in base a quello che è il risultato del processo di costruzione della mappa di rendering. Questo per dire che per uno stesso elemento può essere applicata una serie di regole CSS, le quali possono sovrascriversi, annullarsi, essere anche saltate, in base a tutta la sequenza di costruzione della pagina prima che questa sia effettivamente mostrata nel browser.

Per essere sicuro che delle determinate regole siano state effettivamente applicate ad un particolare elemento, dovresti ricreare quello stesso procedimento di costruzione della mappa di rendering, analizzando quindi tutto il CSS (cioè tutti gli eventuali differenti fogli di stile) secondo la specificità di ogni singola regola che è stata applicata per un tale elemento, così da trovare infine quelle sole regole che risultano effettivamente applicate a quell'elemento.

Ma dietro questo processo c'è appunto un intero browser che si occupa di farlo. Nella console web del tuo browser, andando nello strumento di analisi degli elementi della pagina, c'è una scheda (regole/stili/css o quello che è a seconda del browser) in cui puoi vedere le regole CSS applicate a ciascun particolare elemento, quelle sovrascritte, quelle ereditate, quelle calcolate, ecc.

E' chiaro che con la sola analisi preliminare del codice HTML (in situazioni relativamente complesse) e dell'eventuale (o eventuali) CSS non potrai mai riuscire a capire esattamente quali regole saranno applicate a qualsivoglia elemento se non eseguendo, appunto, l'intero processo di rendering.

Tu poi hai parlato solo di classi, ma oltre l'applicazione delle regole per le classi (singole o multiple che siano) in CSS esistono svariati selettori (di tipo, di id, di classe, generici, ecc.) e tanti altri tipi di "combinatori" (vedi qui) che è possibile appunto combinare in millemila modi diversi per formulare delle regole CSS, proprio come hai pensato tu:

ecc ecc... una infinità di combinazioni.... ?

Per cui non è pensabile poter risalire alle regole applicate (e quindi conoscerle a priori) senza passare prima per il suddetto procedimento, cioè il processo di rendering che può essere effettuato giusto attraverso l'algoritmo di rendering di un browser.

Poi è chiaro che in una situazione alquanto semplice, in cui puoi trovare solo delle regole definite giusto per singole classi, magari si riuscirebbe anche a prevederne il risultato finale, cioè quali regole vengono applicate agli specifici elementi.

Non vedo una concreta soluzione per ciò che ti proponi di fare. Quello che può essere fatto è analizzare in qualche modo la pagina (o le pagine) solo dopo che sono state "aperte" sul browser. A quel punto puoi navigare gli elementi della pagina attraverso JavaScript e in qualche modo ottenere le informazioni che ti servono.

Nel caso puoi fare qualche ricerca del tipo: get css rules applied to specific element

per imparare cosa è un "markup HTML"?

C'è zio gugol.

"le classi applicate sul markup HTML" sono le classi applicate attraverso l'attributo class dei tag HTML ma, come ti ho indicato, queste non hanno per forza una corrispondenza con le regole definite nel CSS.

[ondertol]

Grazie Killer del supporto. Diciamo che ora ho qualche idea un po' più chiara (forse ). Mi piace l'idea di pensare a farsi fare il "lavoro sporco" da un browser, ma dovrei poi capire come...

Comunque per capire meglio come funzionano le class a me è stato utile fare qualche esperimento e ho usato il link seguente (che posto se magari possa essere utile a qualcuno)... http://jsfiddle.net/MUc4T/
Perdendoci una oretta in prove ed esempi mi ha aiutato a chiarire le idee!

Grazie mille!!!

[KillerWorm]

Bene

Perdendoci una oretta in prove ed esempi mi ha aiutato a chiarire le idee!

Non so, in generale la pratica viene dopo la teoria; ti direi che in questo caso, se la tua intenzione è quella di lavorare con i CSS, è meglio prendersi un po' di tempo per leggere qualche buona guida di base così da chiarire bene i concetti fondamentali che ti serviranno per comprendere i risultati delle tue prove oltre che per poter mettere su un qualsivoglia programma che ha a che fare proprio con i CSS.

Nel tuo esempio questo è un selettore con classi multiple: .one.two (entrambe le classi devono trovarsi sull'elemento da identificare)
Questo invece è semplicemente un selettore discendente: .one .two (nota lo spazio per il quale la seconda classe identifica un elemento discendente)

Per i selettori vedi ad esempio questa guida (una tra tante): https://www.html.it/articoli/i-selettori-css/

Il mio consigli è quello di studiare un po' prima di buttarsi a capofitto con prove ed esempi. Puoi trovare svariate guide ed articoli interessanti tra i link utili CSS (discussione in evidenza).

Buon proseguimento, e buone feste.

[ondertol]

Grazie Killer... seguirò certamente i tuoi consigli!!!

Sei stato prezioso!

grazie ancora