HTML5 e Css3 [6]Matteo Magni

Quello che collega il nostro documento HTML ai nostri CSS sono essenzialmente i selettori.

h1,h2,h3,h4,h5,h6,span,strong,p{color: purple }     h1,h2,h3,h4,h5,h6,span,strong,p,img{        border:1px solid #fff;        Font­size: 1.5em;    }   

Tramite quelle semplici i selettori possiamo attribuire le “regole” css ai vari elementi del nostro

DOM

Selettori di relazione

● Selettore di discendenti

div#container p {color: red}

● Selettore di figli (>)

body > p {color: red}

● Selettore di fratelli adiacenti (+)

li + li {margin­left: 10px; color: red}

● Selettore generale di fratelli (~)

h1 ~ h2 {color: red; text­decoration: underline}

Ma ci bastano?

<style>.odd {background­color: yellow;}.even {background­color: red;}</style><tr class="odd"><td>text</td>...<td>text</td></tr><tr class="even"><td>text</td>...<td>text</td></tr>

Dobbiamo usare le classi

Nuovi Selettori

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Selettore di attributo - E[att^=”val”]

Seleziona ogni elemento E il cui valore di attributo att inizia con “val”.

object[type^="image/"]

Selettore di attributo – E[att$=”val”]

Seleziona ogni elemento E il cui valore di attributo att termina con “val”.

a[href$=".html"]

Selettore di attributo – E[att*=”val”]

Seleziona ogni elemento E il cui valore di attributo att contiene la sottostringa “val”.

p[title*="hello"]

jQuery Like CSS syntax

<input name="newsletter" /><input name="milkman" /><input name="newsboy" />

<script>$('input[name^="news"]').val('news here!');</script>

<input name="man­news" /><input name="milkman" /><input name="letterman2" /><input name="newmilk" /><script>$('input[name*="man"]').val('has man in it!');</script>

PseudoClassi

Pseudo-classe E:root

Seleziona l'elemento radice del documento. In HTML, l'elemento radice è sempre l'elemento HTML.

Pseudo-classe E:nth-child(n)

Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore.tr:nth­child(2n+1) /* represents every odd row of an HTML table */

tr:nth­child(2n)   /* represents every even row of an HTML table */

/* Alternate paragraph colours in CSS */

p:nth­child(4n+1) { color: navy; }

p:nth­child(4n+2) { color: green; }

p:nth­child(4n+3) { color: maroon; }

Passo delle formule

/*dispari */

tr:nth­child(2n+0)

tr:nth­child(2n)

 

/* pari */

tr:nth­child(2n+1)

 

tr:nth­child(10n­1)  /* 9, 19, 29, ecc */

tr:nth­child(10n+9) /* 9, 19, 29, ecc */

Pseudo-classe E:nth-child(n)

● can take 'odd' and 'even' as arguments tr:nth­child(2n+1) /* represents every odd row of an HTML table */

tr:nth­child(odd)  /* same */

tr:nth­child(2n)   /* represents every even row of an HTML table */

tr:nth­child(even) /* same */

Pseudo-classe E:nth-last-child(n)

Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore, partendo dall'ultimo figlio.

tr:nth­last­child(­n+2)    

/* represents the two last rows of an HTML table */

foo:nth­last­child(odd)    

/* represents all odd foo elements in their parent element,counting from the last one */

Pseudo-classe E:nth-of-type(n)

Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo.

/*elementi p all'interno del div distanziati di 2*/

div p:nth­of­type(2n) {background­color: yellow}

Pseudo-classe E:nth-last-of-type(n)

Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo, partendo dall'ultimo fratello.

/* seleziono il penultimo p all'interno del div*/

div p:nth­last­of­type(2) {background­color: yellow}

E:last-child E:first-child

Last:

Seleziona ogni elemento E che è l'ultimo figlio del suo genitore.

First:

Seleziona ogni elemento E che è il primo figlio del suo genitore.

Pseudo-classe E:first-of-type

Seleziona ogni elemento E che è il primo fratello del suo tipo.//dl dt:first­of­type

<dl>

 <dt>gigogne</dt>

 <dd>

  <dl>

   <dt>fusée</dt>

   <dd>multistage rocket</dd>

   <dt>table</dt>

   <dd>nest of tables</dd>

  </dl>

 </dd>

</dl>

Non il terzo

Pseudo-classe E:last-of-type

Seleziona ogni elemento E che è l'ultimo fratello del suo tipo.

tr > td:last­of­type

Pseudo-classe

E:only-child

Seleziona ogni elemento E che è l'unico figlio del suo genitore.

E:only-of-type

Seleziona ogni elemento E che è l'unico fratello del suo tipo.

E:empty

Seleziona ogni elemento E che non ha figli (inclusi i nodi di testo)

Pseudo-classe di destinazione

E:target

Seleziona un elemento E che è la destinazione dell'URL di riferimento.

*:target { color : red }

Pseudo-classe di stato

E:enabled

Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è abilitato.

E:disabled

Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è disabilitato.

input[type="text"]:enabled { background:#ffc; }

input[type="text"]:disabled { background:#ddd; }

Pseudo-classe di stato

E:checked

Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che viene selezionato.

input:checked { border:1px solid #090; }

E::selection

Seleziona la porzione di un elemento E attualmente selezionata o evidenziata dall'utente.

Pseudo-classe negazione

E:not(s)

Seleziona ogni elemento E che non corrisponde al selettore semplice s.

Supporto dei Browser?

http://kimblim.dk/css-tests/selectors/

TransizioniCss

p { width: 200px;height: 200px;background­color: yellow;}   p:hover {background­color: red;}   

p { width: 200px;height: 200px;background­color: yellow;transition­property: background­color;transition­duration: 5s;}   p:hover {background­color: red;}

   

Regole proprietarie

­webkit­transition­property: background­color; 

­webkit­transition­duration: 2s;

         

­o­transition­property: background­color;      

­o­transition­duration: 2s;

         

­moz­transition­property: background­color;   

­moz­transition­duration: 2s;

Attributi

● transition-property

proprietà a cui assegnamo la transizione

● transition-duration

durata della transizione in secondi (0 default)

Attributi

● transition-timing-function

Come si calcola il cambiamento:

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier

● transition-delay

ritardo nell'iniziare la transizione

Domande?

Slide:

http://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

matteo@magni.me