Goedemiddag Allemaal,

Ik zit met het volgende:

<div id="footer">
    <p><span class="links">tekst</span></p>
</div>


Nu wilde ik deze gaan stijlen door het volgende te gebruiken: #footer p span .links
alleen word dit niet opgepakt. Hoe is dit te fixen?

#footer p .links {
     color: red;
}
Of span of .links weglaten. Want span en .links zitten op zelfde niveau.

* update* Ariën was met net voor
@Arien, dat is weer een snelle hulp, bedankt voor je post.

Bedankt voor je antwoord Jan, heb je hier toevallig meer info bij?

span . links kan wel, maar nu niet omdat?


Jan de Laet op 12/04/2016 15:13:55

Of span of .links weglaten. Want span en .links zitten op zelfde niveau.

* update* Ariën was met net voor

@Jan G, span en .links slaan op hetzelfde element. Dus je verwijst of naar de span of naar de class links.

Als je dit had dan kon het wel wat jij deed, want dan zit class links onder span:

<div id="footer">
    <p>
       <span>
          <div class="links">tekst</div>
       </span>
    </p>
</div>
Je zou zelfs simpelweg #footer .links kunnen gebruiken, zolang er maar geen specifieker CSS-pad naar deze elementen is, want die krijgt dan mogelijk voorrang.
Of #footer p span.links gebruiken (span.links aan elkaar aangezien het om hetzelfde element gaat).
Kijk handige informatie, hier kunnen we wat mee. Bedankt iedereen voor de reactie's.

Sabaton Joakim op 12/04/2016 17:18:10

Of #footer p span.links gebruiken (span.links aan elkaar aangezien het om hetzelfde element gaat).


#footer p span.links

Is de ID footer? Ja
Gaat het om een paragraaf? Ja
Is het een span? Ja
Heeft de span de class 'links'? Ja

versus

#footer .links

Is de ID footer? Ja
Is de class 'links'? Ja

Ofwel 4 controles versus 2 controles ...

Denk dus goed na over hoe je een en ander inricht.
Hier speel je precies in op mijn vraag. Qua eigen leesbaarheid zeg ik #footer p span.links controllers zijn beter. Qua uitvoering zeg ik: #footer .links.

Wat is nou 'legit' of de 'beste' manier?

Ozzie PHP op 12/04/2016 20:23:48

#footer p span.links

Is de ID footer? Ja
Gaat het om een paragraaf? Ja
Is het een span? Ja
Heeft de span de class 'links'? Ja

versus

#footer .links

Is de ID footer? Ja
Is de class 'links'? Ja

Ofwel 4 controles versus 2 controles ...

Denk dus goed na over hoe je een en ander inricht.


Dit kun je niet echt op voorhand zeggen, het hangt er vanaf hoe de elementen worden gebruikt en welke andere elementen er nog meer voorkomen in hetzelfde onderdeel, en hoe je deze wilt voorzien van opmaak.

Als je footer enkel/overwegend bestaat uit dit soort spans zou je best voor een minimale benadering kunnen gaan.

Wat je ook nog mee kunt nemen in je overweging is flexibiliteit: mocht je de HTML indeling nog aanpassen en je hebt hele specifieke stijlregels hiervoor opgesteld (dus je hebt het "element-pad" helemaal uitgeschreven in je CSS) dan mag je je CSS mogelijk ook opnieuw gaan schrijven.

En wanneer je alles een beetje flexibel opzet is er ook nog ruimte voor het definiëren van uitzonderingen door CSS toe te voegen die specifieker is.

Een goede "rule of thumb" is dus waarschijnlijk dat je niet op voorhand alles helemaal vastschroeft.

Reageren