Styling af et <span>

Vil sige at det er vel nærmere at du bruger CSS selectors.
Hvis man vil style et child-element så er det meget nemt.
Så så længe du kan identidicere et element vil du også kunne ramme child-elementerne.

Dette er et eksempel der tager udgangspunkt i dit kode for hvordan du kan lave det vist på siden.

 .subfeatures > li 
 {
   /* her styler du LI-elementet */
   font-weight: bold;
 }
 
 .subfeatures > span
 {
   /* her styler du SPAN-elementet */
   color: darkgray;
   font-weight: normal;
 }

Det smarte ved CSS selectors er at du meget nemt og effektivt kan vælge utroligt mange elementer på forskellige måder. Er noget af det der fascinerer mig personligt fordi det netop er så effektivt.

For at forklare det jeg faktisk gør er:
Jeg vælger først klassen (yderste element .subfeatures), derefter siger jeg at childelementet span ( > span ) vil jeg have dette til at gælde for.
Du kan også bruge dette til at vælge andre klasser indeni en anden klasse, eller andre klasser indeni andre elementer.

Hvis du vil se en lille smule af mulighederne og lære lidt samtidigt, så foreslår jeg du ser en ~ 20 min. lang video fra Microsoft til undervisningsmateriale som har dette som et punkt. Du kan spole i den til du kommer til dette.

Se nærmere her: http://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start
og vælg del 2 omkring CSS selector.

@Henrik
Tak er jeg glad for.
Der er også en forskel man skal tænke på, som måske kan virke som lille - men som giver performance og som er godt at have på rygraden når du koder da du derved altid får mere optimeret kode.

Eksempel 1:
Du bruger classes til alting.

 <ul class="ul-list-class">
 <li class="li-element-class"><span class="gray-text">Element 1</span></li>
 <li class="li-element-class"><span class="gray-text">Element 2</span></li>
 <li class="li-element-class"><span class="gray-text">Element 3</span></li>
 <li class="li-element-class"><span class="gray-text">Element 4</span></li>
 <li class="li-element-class"><span class="gray-text">Element 5</span></li>
 </ul>

Her styler du alting i dine klasser, og du har utroligt meget af det samme markup for samme effekt. Meget fyld, og meget der er unødigt.

Eksempel 2:
Hvis man ser på ovenstående eksempel, så kan det effektificeres meget ved at gøre det med css-selectors.

 <ul class="ul-list-class">
 <li><span>Element 1</span></li>
 <li><span>Element 2</span></li>
 <li><span>Element 3</span></li>
 <li><span>Element 4</span></li>
 <li><span>Element 5</span></li>
 </ul>

Dette er langt mindre markup - hvilket giver mindre data der skal sendes over din forbindelse.
Derudover er det nemmere at læse.
For det tredje er det langt mere effektivt fordi du bruger CSS selectors.

 .ul-list-class > li
 {
  /* her styler du LI fremfor en klasse */
  /* Du vælger LI indeni klassen "ul-list-class" */
 }
 
 ul-list-class > li > span
 {
  /* her styler du SPAN fremfor en klasse */
  /* Du vælger SPAN indeni LI indeni klassen "ul-list-class" */
 }

Det er langt mere effektivt fordi du har mindre markup, mindre data der sendes, mere læsbar kode, og en langt mere optimal løsning.

Den simple inline style:

Kode 

<span style="color:red;">Dette bliver rødt</span>

Martin tog lige tidsmaskinen tilbage til år 1999

Arh, i 1999 er jeg ret sikker på at det havde været <font color="red">Dette bliver rødt</font>

Mvh.

Kasper (TSW)

Du kan style direkte på html elementer uden klasser eller id'er.

fx:

 ul li span {
 /*din style her*/
 }

Hej

Tak for dit svar

Ja, det er da også rigtigt ! - hvorfor, jeg ikke lige tænkte på denne mulighed, ja det må vist stå for min egen regning

Grunden til at det, for mig, så noget "kryptisk" ud, er at jeg plejer at oprette classes eller ids til ALT mit styling, men det skyldes nok at jeg er særdeles uerfaren i brugen af HTML og CSS, samt stort set alt muligt andet (selverkendelse er en smuk ting synes jeg) !

Endnu en gang tak for dit svar.

Der finde nogen smart browser addons der er god til at finde ud af sådan noget.

Så kan man højre klikke på teksten og vælge "Inspicer element" også kan du komme til at se hvad CSS kode der gælder for det element og hvad fil og linie CSS koden er fra.

Se her fra Firefox :
http://netkoder.dk/test/billeder/billed0012.png

Det er "Firebug" addon du kan det med.

Din måde at give dem alle en class er ikke nødvendig vis dårlig.
Hvis du køre "page speed" addon give de denne besked :

Very inefficient rules (good to fix on any page):
ul.subfeatures li span

Altså det er ikke godt og have så mange selectorer efter hinanden det tror jeg gør koden langere at udfører for browseren.

Så i stedet for at skrive :
html div ul li span {

}

Så er det nok hurtigere for browsere at give span elementerne en class også skrive

.minespans {

}

Her er lidt information paa best practice omkring CSS fra Google.
https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors

@csharper

Tak for din forklaring og CSS-ekspempel.

Jeg kan se en umiddelbar fordel i denne metode - man kan reducere antallet af classes og ids, hvilket igen betyder et kortere CSS dokument og mindre at holde styr på.

En anden fordel, jeg fornemmer, er at man grupier sine elementer på en overskuelig måde - jeg synes eksemplet du har lavet er ret nemt at forstå.

Det er helt klart noget jeg skal prøve at lege lidt med.

Den simple inline style:

<span style="color:red;">Dette bliver rødt</span>

Den simple inline style:

Kode 

<span style="color:red;">Dette bliver rødt</span>

Martin tog lige tidsmaskinen tilbage til år 1999