<ol>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="aktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
<li class="inaktiv">liste</li>
</ol>
/*Her velger jeg element nr 1,3,5...*/
/*Bytt ut odd med even for å velge 2,4,6...*/
ol li:nth-child(odd){
color: red;
}
/*Her velger jeg det første elementet i listen */
ol li:first-child{
color: blue;
}
/*Her velger jeg det siste elementet i listen */
ol li:last-child{
color: green;
}
/*Her velger jeg hva som skal skje ved å holde pusepeker over elementet */
ol li:hover{
color: purple;
}
/*Her velger jeg at alle elementene i listen utenom listelementet med klassen "aktiv" */
li:not(.aktiv){
font-weight:bold;
}
/*Man kan også legge til flere :Pseudo selektorer på en gang.*/
li:not(.inaktiv)::after{
content: " +";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.