Css pakt class niet op?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Graneker

Jan Graneker

12/04/2016 15:01:25
Quote Anchor link
Goedemiddag Allemaal,

Ik zit met het volgende:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<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?
 
PHP hulp

PHP hulp

18/12/2024 21:56:50
 
- Ariën  -
Beheerder

- Ariën -

12/04/2016 15:11:26
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
#footer p .links {
     color: red;
}
Gewijzigd op 12/04/2016 15:11:39 door - Ariën -
 
Jan de Laet

Jan de Laet

12/04/2016 15:13:55
Quote Anchor link
Of span of .links weglaten. Want span en .links zitten op zelfde niveau.

* update* Ariën was met net voor
Gewijzigd op 12/04/2016 15:15:23 door Jan de Laet
 
Jan Graneker

Jan Graneker

12/04/2016 15:21:07
Quote Anchor link
@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
Gewijzigd op 12/04/2016 15:21:40 door Jan Graneker
 
Jan de Laet

Jan de Laet

12/04/2016 15:29:09
Quote Anchor link
@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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<div id="footer">
    <p>
       <span>
          <div class="links">tekst</div>
       </span>
    </p>
</div>
Gewijzigd op 12/04/2016 15:29:31 door Jan de Laet
 
Thomas van den Heuvel

Thomas van den Heuvel

12/04/2016 17:00:09
Quote Anchor link
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.
Gewijzigd op 12/04/2016 17:00:30 door Thomas van den Heuvel
 
Joakim Broden

Joakim Broden

12/04/2016 17:18:10
Quote Anchor link
Of #footer p span.links gebruiken (span.links aan elkaar aangezien het om hetzelfde element gaat).
 
Jan Graneker

Jan Graneker

12/04/2016 19:32:02
Quote Anchor link
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).
 
Ozzie PHP

Ozzie PHP

12/04/2016 20:23:48
Quote Anchor link
#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.
Gewijzigd op 12/04/2016 20:49:21 door Ozzie PHP
 
Jan Graneker

Jan Graneker

13/04/2016 08:34:30
Quote Anchor link
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.
Gewijzigd op 13/04/2016 09:03:03 door Jan Graneker
 
Thomas van den Heuvel

Thomas van den Heuvel

13/04/2016 09:38:59
Quote Anchor link
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.
 
Ward van der Put
Moderator

Ward van der Put

13/04/2016 13:19:59
Quote Anchor link
Je kunt het eventueel nog beperken tot .footerlink en class="footerlink" met slechts één CSS-klasse.

Aangezien je het specifiek over "links" in de footer hebt, vraag ik me daarnaast af of je dan niet beter de <a>-tags voor echte hyperlinks kunt stylen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
#footer a { ... }


Dat heeft zelfs nog een bijkomend voordeel: je kunt een hyperlink uitgebreider stylen met pseudo-klassen, bijvoorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
#footer a:link { ... }
#footer a:visited { ... }
#footer a:hover { ... }
 
Jan Graneker

Jan Graneker

13/04/2016 15:36:26
Quote Anchor link
Bedankt voor je antwoord Ward.

Ik zie nu net je profielfoto. Heb je het PHP kookboek geschreven? Heb hem vorige week besteld en ga er deze week aan beginnen. Heb hem even snel doorgekeken en daar stond al super veel handige info over. Erg goed werk.

Ward van der Put op 13/04/2016 13:19:59:
Je kunt het eventueel nog beperken tot .footerlink en class="footerlink" met slechts één CSS-klasse.

Aangezien je het specifiek over "links" in de footer hebt, vraag ik me daarnaast af of je dan niet beter de <a>-tags voor echte hyperlinks kunt stylen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
#footer a { ... }


Dat heeft zelfs nog een bijkomend voordeel: je kunt een hyperlink uitgebreider stylen met pseudo-klassen, bijvoorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
#footer a:link { ... }
#footer a:visited { ... }
#footer a:hover { ... }
 
Ward van der Put
Moderator

Ward van der Put

13/04/2016 17:15:38
Quote Anchor link
Jan Graneker op 13/04/2016 15:36:26:
Ik zie nu net je profielfoto. Heb je het PHP kookboek geschreven? Heb hem vorige week besteld en ga er deze week aan beginnen. Heb hem even snel doorgekeken en daar stond al super veel handige info over. Erg goed werk.

Ja Jan, dat ben ik.
Bedankt voor het compliment en veel plezier met het boek!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.