Spesso nei siti web è facile trovare una lista di questo tipo:
<ul id="selected-plays">
<li>Comedies
<ul>
<li><a href="http://www.mysite.com/asyoulikeit/">
As You Like It</a></li>
<li>All's Well That Ends Well</li>
<li>A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
</ul>
</li>
<li>Tragedies
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Macbeth</li>
<li>Romeo and Juliet</li>
</ul>
</li>
<li>Histories
<ul>
<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
<li><a href="http://www.shakespeare.co.uk/henryv.htm">
Henry V</a></li>
<li>Richard II</li>
</ul>
</li>
</ul>
Supponiamo di voler disporre gli elementi top level: Comedies, Tragedies, Histories in orizzontale
Faremo per prima cosa un CSS con una classe .horizontal:
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
Potremmo settare la nostra classe direttamente in html. Ma useremo jQuery:
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
});
Stiamo usando il child selector ' > ': stiamo dicendo a jQuery "trovami tutti gli 'li' figli diretti dell'elemento con ID '#selected-plays'
Se ora volessi assegnare uno stile ai sottolivelli? per esempio un background grigio?
Potrei usare questa sintassi (si chiama negation pseudo class)
.sub-level {background-color:#CCCCCC;}
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});
Ed il risultato sarebbe: