css: applicare o rimuovere una classe all’elemento “parent”

Si può ricorrere a jquery.
Mettiamo che io voglia applicare la class “noquote” (che toglie le virgolette all’inizio del paragrafo) a un p al cui interno si trova uno span. La sintassi è questa:
    $( “p:has(> span)” ).addClass( “noquote” );
Se invece io voglio che p abbia le virgolette all’inizio se lo span ha una certa classe (mettiamo “evid”), la sintassi è la seguente:
    $(“.evid”).parent().removeClass(“noquote”);

formattazione condizionale css

Parliamo di tag html e di css. Voglio che se un p comincia con uno span non venga applicata una certa regola (nella fattispecie “aperte virgolette”). In effetti creo una pagina php con citazioni di autori e capita che un certo item cominci non con le parole dell’autore, ma con una mia introduzione.
Non è possibile agire a livello di puro css, col selettore :not (nella fattispecie :not(p > span): non viene riconosciuto.
Allora bisogna usare jquery

  • collegare la pagina php a jquery su web (<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”></script>)
  • creare una classe css, nel mio caso: .noquote (metto l’intero codice: “blockquote p.noquote:first-child:before {content:none;}”
  • inserire lo script: “<script type=”text/javascript”>
    $( “p:has(> span)” ).addClass( “noquote” );
    </script>”

E il gioco è fatto!

drop-down menu

Abbiamo trovato un interessante menu drop-down (a tendina) in puro CSS (senza javascript), valido anche per IE (dalla 9 in poi).
Lo trovate qui.
Una attenzione da avere, se ci sono problemi, è di verificare le righe di css con identico nome (ad es. #nav li) per eliminare eventuali proprietà che confliggono con il menu a tendina (ad es. ci è capitato di avere problemi per la presenza della proprietà “display: inline” riferita a “#nav li”).

far vedere solo a Firefox certe proprietà css

Può essere utile far vedere solo a un certo browsers certi attributi css. Se il browser è Firefox la sintassi da usare, all’interno del file css è la seguente:
@-moz-document url-prefix() seguita da parentesi graffe che abbraccino tutta la porzione di css che si vuole nascondere agli altri browsers.

icone generate automaticamente

Segnalo un interessante tip (da Opera-dev):

You can use attribute selectors with the content property to render icons after a link based on what file format it is or if it is an external one.

a[href $=’.pdf’]:after {   content:url(icon-pdf.png);}  

a[rel=”external”]:after {  /* You can also use a[href ^=”http”]:after */
   content:url(icon-external.png);}

the first rule uses a CSS3 selector with substring matching — href $=’.pdf’ means “href attributes with .pdf at the end of the value.”

As with regular expressions, ^ and $ refer to the start and end of a string, respectively. With CSS 3 substring matching attribute selectors, [attribute^=value] and [attribute$=value] allow you to match elements whose attribute content starts or ends with the specified value, while [attribute*=value] selects elements where the value is found anywhere in the attribute.