Leggi bene cosa ho indicato all'inizio dell'ultimo post.Originariamente inviata da stardom
Una cosa alla volta
Leggi bene cosa ho indicato all'inizio dell'ultimo post.
Una cosa alla volta
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
L'assegnazione dell'ID e lo style mi sembrano corretti, piuttosto io vedo una chiamata ad un template esterno @extends(getTemplate().'.layouts.app'), e credo che il footer venga da lì, non dalla <section>
niente, con :has(#id) non mi funziona. Invece mi funziona con :is(section) + footer {display:none;}
Come te lo spieghi?
No, ti riporto cosa ho indicato nel precedente post, sottolineando il punto della questione
Tu invece hai fatto questo:
Cioè stai verificando se SECTION HA (al suo interno) un elemento con id pagina-404, quindi (tramite il combinatore + "fratello successivo") stai selezionando suo fratello successivo BODY (il che non sarà rilevato perché BODY non è fratello successivo di quel SECTION), infine stai selezionando il suo (di BODY) discendente FOOTER (che non sarà rilevato perché BODY stesso non è stato rilevato).Quel :has() infatti non devi applicarlo a section ma, come ti ho indicato, devi applicarlo a body per poter verificare se body HA (al suo interno) un elemento con tale id.codice:section:has(#pagina-404) + body footer {display:none;}
Perché devi applicarlo a body?
Perché è necessario utilizzare un elemento che sia contenitore comune tra quel section e il footer, in modo da poterlo usare come "parent" sia per la funzione has() (con la quale puoi impostare la "condizione") sia per l'elemento footer, che devi selezionare per applicargli le proprietà CSS.
In questo caso body viene appunto selezionato quando è verificata la "condizione" dettata da :has(), e a quel punto puoi costruire il resto del selettore per rilevare il footer, usando il combinatore spazio (cioè "elemento discendente", non il "+", il quale indica invece il "fratello successivo") che andrai a mettere di seguito alla prima parte (il body selezionato, o meno, in base a quel :has).
Parafrasando la costruzione del selettore, dovrai fare una cosa del genere:
Capisco che non sia facile comprendere il funzionamento di questa roba, soprattutto se non hai una buona conoscenza dei vari altri concetti CSS relativi ai vari combinatori, selettori, funzioni, ecc. ma spero comunque di essere riuscito a farti capire almeno in parte il principio di funzionamento di tale pseudo-classe.codice:BODY HA( un elemento #pagina-404), allora selezionalo, quindi (a partire da BODY) seleziona l'elemento (suo discendente) .FOOTER
Fai sapere
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Dunque, in realtà avevo già provato con body:has(#pagina-404) ma non portava risultati. Evidentemente è la porzione "combinatore + fratello successivo" che non mi torna. Ma voglio partire dalla soluzione alternativa :is(section) + footer {display:none;}. Se praticamente si traduce con "se esiste section allora vai a pescare footer e nascondilo", allora perché nel caso di :has non devo usare il "+"?
Anche perché nel caso precedente body ERA fratello successivo di head: head:has(meta[content^="Home Page"]) + body footer {display:none;}
Mi funziona con body:has(#pagina404) footer {display:none;} ma vorrei capire quale differenza c'è da :is
PS. adesso dovrei trovare il conflitto di p con la box GDPR
PS UPDATE: ho risolto aggiungendo una ulteriore classe a p per evitare conflitti con il p del tema
Ultima modifica di stardom; 05-11-2024 a 17:33
Ed era esattamente quello che dovevi fare.
Occhio però, una volta hai specificato l'id col trattino mentre poi l'hai specificato senza (pagina-404 e pagina404). Chiaramente il CSS deve corrispondere a quello che hai specificato nel codice HTML, forse si è creata un po' di confusione.
In questo caso posso dirti che :is() è totalmente inutile qui, dal momento che hai specificato un solo elemento come argomento. Ti invito a leggere la documentazione per comprenderne il funzionamento.codice::is(section) + footer {display:none;}
Parafrasando:
:is(section) seleziona un qualsiasi elemento che è <section>
+ footer quindi seleziona un qualsiasi <footer> che è rilevato come fratello successivo dell'elemento appena selezionato (<section>)
Questo selettore ha esattamente la stessa valenza di
Non c'è motivo di usare quell':is().codice:section + footer {display:none;}
In questo caso tu stai selezionando qualsiasi <footer> che viene rilevato come fratello successivo di un qualsiasi <section>. Certamente ti funziona nella pagina 404, perché hai quella situazione, ma potrebbe darti falsi positivi nelle varie altre pagine, dove potresti appunto avere la stessa situazione ma voler mantenere il footer visibile. Ecco perché va specificato meglio il selettore.
Una soluzione può appunto essere quella di impostare un id da qualche parte, così come ti ho indicato di fare, quindi "verificare" quando l'elemento con tale id è presente nel body e di conseguenza andare a selezionare (attraverso quel body che ha un elemento con quell'id) il footer che a te interessa selezionare.
Ovviamente a questo selettore puoi aggiungere, separando con la virgola, gli altri visti in precedenza, per cui applicare le stesse proprietà (in questo caso il display:none)
codice:head:has(meta[content^="Home Page"]) + body footer, body:has(#pagina404) footer {display:none;}Ottimo
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Molte molte grazie per i chiarimenti. Quando c'è qualcuno che ti spiega, è sempre meglio delle info trovate sul web che danno tutto per scontato, come se uno imparasse css+html alle elementari
Permessi di invio
Rispondi quotando