4 selettori e parentele

Pubblicato il di

font

Come per l’attributo border visto nella scorsa lezione, posso specificare più proprietà insieme anche per altri, abbiamo visto i vari attributi per font (font-size, font-width, font-family), proviamo a raggrupparle tutte dentro font:

font: 40px bold "Arial,Helvetica, sans-serif";

text

Vediamo alcuni attributi di text

text-align: center;
text-decoration: underline;
text-transform: lowercase;

testo centrato, sottolineato, trasformato in minuscolo. raggruppando:

interlinea

dato questo paragrafo a 4 righe con la classe spaziato

<p class="spaziato">
   <ul>
    <li class="squadra">MILAN</li><br>
    <li>Il resto della pagina</li><br>
    <li>Il resto della pagina</li><br>
    <li>Il resto della pagina</li><br>
   </ul>
</p>

imposto la spaziatura tra le righe con

line-height: 3em;

Ovviamente si può esprimere la spaziatura anche in pixel

list

Si può usare delle immagini al posto dei pallini con l’attriburo list-style-image 

.lista {
    list-style-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Seme_coppe_carte_napoletane.svg/293px-Seme_coppe_carte_napoletane.svg.png");
}

usando il list-style-type si possono cambiare i pallini con altri simboli, se supportati dai browsers

list-style-type: lower-greek;

le lettere greche minuscole compariranno al posto dei pallini (non supportate dai vecchi internet explorer).

selettori

il simbolo di cancelletto # applica le regole a tutti gli elementi html che hanno quell’id specificato dopo il #.

#milan {background-color: black; color: red;}
#inter {background-color: black; color: blue;}
#juve {background-color: black; color: white;}

notiamo che i 3 selettori hanno in comune lo sfondo nero, per cui posso raggruppare tale proprietà a tutti e 3.

#milan, #inter, #juve {background-color: black}
#milan {color: red;}
#inter {color: blue;}
#juve {color: white;}

l’importante che ogni selettore venga separato da virgola. Poi posso inserire le regole specifiche per ognuno selettore. Il raggruppamento con virgola funziona con tutti i tag e le classi e gli id.

Facciamo un esempio per vedere un’altra possibilità, abbiamo del testo che parla di squadre di calcio, quindi applichiamo uno sfondo rosa e colore del testo nero (tipo gazzetta), però quando si parla comunque di una squadra e siamo all’interno di un elenco puntato, vogliamo che la scritta sia il doppio e in grassetto. Associamo quindi una classe squadra ai tag e scriviamo la regola css

.squadra { background-color: pink; color: black; }

Inoltre per applicare ulteriori regole quando la classe squadra è dentro <li>

LI .squadra {font-size: 2em; font-weight: bold }

quando la classe squadra (.squadra) sta dentro un tag <li> aumenta la dimensione e lo spessore.

Analogamente quando un id sta dentro un <li>

LI #milan {background-color: black; color: red;}

Si può assegnare più classi allo stesso elemento:

<li class="squadra preferita">GENOA</li>

e quindi la regola

.squadra.preferita {font-size: 5em;}

seleziono gli elementi che contengono nel loro elenco di classi sia preferita sia squadra. L’ordine col quale si mettono le 2 classi è indifferente, verranno applicate le regole  quei tag che contengono entrambe le classi.

Fino ad ora abbiamo applicato selettori in base al nome, ma è possibile farlo anche in base alla posizione reciproca nel documento html oppure in base al loro grado di parentela.

Potrei voler formattare diversamente il primo li di ogni lista

li:first-child { color: blue; font-style: italic;}

Questa regola viene applicata ad ogni primo list item di ogni lista (ul o ol) tramite l’operatore due punti ( : ) e la parola first-child .

p:first-child { color: blue; font-style: italic;}

In questo caso applico la regola ad ogni primo paragrafo della pagina. Se il paragrafo è contenuto all’interno di un <div> viene considerato come primo paragrafo (di quel div) e la regola viene applicata.

Sata la tabella

<table>
    <tr>
        <td><p>CREMONESE</p></td>
        <td><p>CASALESE</p></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

applichiamo queste regole alla tabella e ai suoi elementi

table, tr, td {border: 2px black solid}

ora applico una regola generale ai paragrafi

p {font-size: 3em; color: blue;}

bene, voglio però applicare una regola differente ai paragrafi contenuti nei table data (td)

td > p {font-size: 1em; color: red}

Con questa forma si dice che ogni paragrafo figlio (simbolo maggiore) di ogni td . Si inizia sempre mettendo il genitore ! .

<td><span><p>CASALESE</p></span></td>

in questo caso la regola non viene applicata perché p non è figlio diretto di td, ma di span. Se voglio invece applicare la regola su ogni paragrafo contenuto, anche indirettamente, in ogni td, uso questa forma:

td p {font-size: 1em; color: red}

Qualunque paragrafo discendente da un td, viene applicata la regola.

table + p {background-color: pink; }

Questa sintassi è la fratellanza, e si legge come il primo paragrafo conseguente una tabella, applico la regola, aggiungo per prova un paragrafo dopo la tabella:

<table>
    <tr>
        <td><p>CREMONESE</p></td>
        <td><span><p>CASALESE</p></span></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table><p>sottotitolo</p>