Selettori avanzati o pseudo selettori in css3

Conoscere bene linguaggio css porta tanti benefici e velocizza il lavoro , non è una novita come tra l'altro anche in altri settori.  Ma oggi vorrei dedicare questo articolo a cosi detti pseudo selettori che ci potranno aiutare di scegliere qualsiasi elemento della nostra pagina senza passare alla creazione dei novi classi o id nel codice html. Vorrei subito precisare che la tema non è tanto facile, perche si bassa su un concetto logico e dei calcoli ma comunque spero che il mio esempio vi chiarirà le idee e lo potrete utilizzare come un suggerimento.   

I pseudo seleltori che vedimo oggi sono suportati  da tutti i principali browser, tra cui Internet Explorer 9 e superiori. E se qualcuno usa explorer della versione piu vecchia allora  potrà sempre aggiornarlo e quindi non dobbiamo nemmeno prender tali situazioni in considerazione

Strutura html

Vediamo subito il codice html del nostro esempio. Il codice è molto semplice abbiamo tanti div senza nessun contenuto

<div class="container">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"><span></span></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem" data-foo="bar1"></div>
<div class="elem" data-foo="bar2"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>

 

Codice CSS
E vedimo il codice base  di stili css per il nostro codice di sopra

p{
font-size: 16px;
width: 420px;
margin: 20px auto 0;
text-align:center;
}
.container{
width: 420px;
margin:50px auto 0;
overflow: hidden;
padding:5px;
}
.elem{
width:30px;
height:30px;
margin:4px;
background-color:#A0DFAC;
float:left;
}
.elem span{
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:2px solid #fff;
}

Il nostro risultato dal utilizzo di pseudo selettori

E vediamo il risultato che otteremo utilizzando i pseudo selletori della presente lezione.

1. Come selezionare e decorare la prima lettera e primo paragrafo o altro elemento per tag  nel documento

p::first-letter{/*pseudo seletore della prima lettera in ogni paragrafo*/
background-color: #666;
color: #FFF;
font-size: 24px;
font-style:normal;
display: inline-block;
padding: 0 5px;
border-radius: 3px;
margin-right: 2px;
font-family: serif;
}
p::first-line{/*pseudo seletore del primo paragrafo nel documento*/
font-size: 18px;
text-transform: smallcaps;
font-style: italic;
text-decoration: underline;
}

2. Colorare il primo e l'ultimo elemento di color viola

.elem:first-child,/*prima indichiamo il classe dei elementi che ci interessano e poi scegliamo il primo e ultimo elemento del gruppo */
.elem:last-child{
background-color:#948bd8;
}

 

3. Scegliere gli elementi dispari (odd)del gruppo (:nth-child) e farli rotondi

 

.elem:nth-child(odd){
border-radius:50%;

e per cheglier elementi pari si utilizza pseudoselettore even quindi il nostro seletore completo sara cosi .elem:nth-child(even)

4. Scegliere ogni sesto (:nth-child(6))elemento del gruppo e colorarlo di rosso

.elem:nth-child(6){
background-color:#cb6364;
}

La cifra  6 come hai capito indica il numero del elemento che vogliamo scegliere

 

5.Scegliere gli elementi non vuoti :not(:empty) (quelli che contengono al suo interno qualche altro tag) nel nostro caso elementi con il tag span al interno e trasformarli.

.elem:not(:empty){
background-color:#444;
position:relative;
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}

E per scegliere elementi vuoti per esempio un semplice paragrafo senza nessun tag al interno il nostro selettore sara cosi .elem:empty

6 Scegliere gli elementi che possiedono un certo attributo nel nostro caso ce ne sono due di questi elementi e anno atributi data-foo="bar1" e data-foo="bar2"

.elem[data-foo=bar1]{
background-color:#aaa;
}
.elem[data-foo=bar2]{
background-color:#d7cb89;
}

7. Vediamo anche  un  altra  opzione di come scegliere elementi con attributi che comincino con la stessa parola nel nostro caso sara “bar”

.elem[data-foo^=bar]{
width: 16px;
height: 16px;
margin: 11px;
}

8. E ultimo che vorei far vedere è il seletore che ci permette di scegliere un elemento che va subito dopo un certo elemento

.elem[data-foo=bar2] + .elem{
background-color:#78ccd2;
}

E per scoprire di piu su questo tipo di selettori potete sempre consultare il sito ufficiale del CSS3 nel capitolo selettori

Letto 461 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso