Vraag & Antwoord

Webprogrammeren & scripting

Specificiteit van CSS (en jQuery) selectors

3 antwoorden
  • Ik ben er al een paar keer tegenaan gelopen en heb het ook steeds op kunnen lossen, maar zonder zelf eigenlijk echt te weten hoe :) Namelijk de prioriteit van een CSS selector aanpassen door hem specifieker te maken. Je defineert bijvoorbeeld een algemene stijl voor een <a>nchor tag. Ergens linksonder wil je die net een andere stijl meegeven, en wat je ook probeert, hij blijft hardnekkig die algemene stijl gebruiken. Het antwoord is dat je de selector specifieker moet maken en daarmee een hogere prioriteit mee kunt geven. Iets wat altijd werkt, zij het in mijn geval soms na enigzins proberen. Want wat is specifieker? Je kunt het zowel voor als na de betreffende tag specifieker maken. Voorbeeld: default: [code:1:397492d98b] a { color: blue; } [/code:1:397492d98b] specifieker 1: [code:1:397492d98b] #footer a { color: red; } [/code:1:397492d98b] specifieker 2: [code:1:397492d98b] a.footer { color: red; } [/code:1:397492d98b] In de meeste gevallen kan het beiden, maar ik heb wel eens meegemaakt dat de eerste manier ook mis ging. Dus dan was een specifieker pad niet voldoende en moest ik de tag een aparte class geven. Gisteren en vanochtend had ik iets vergelijkbaars met een jQuery selector. Mijn scriptje deed niks en na lang onderzoek (ik was werkelijk ten einde raad) ontdekte ik via Firebug dat mijn (DOM) element niet geselecteerd werd door mijn jQuery scriptje. Na uitgebreide inspectie van de betreffende selector kon ik er nog steeds niks fouts aan ontdekken, tot ik deze dan maar anders formuleerde. En jawel, daar ging het werken, zonder dat ik zelf wist wat ik nu verbeterd had. (Voor mijn gevoel stuurde ik het script eerst linksom en nu rechtsom, maar naar hetzelfde doel ;) Kortom, hoe zit dat nu met die specificiteit van die selectoren?
  • Misschien heb je hier iets aan? [url=http://css-tricks.com/specifics-on-css-specificity/]Specifics on CSS Specificity[/url] Ik las laatst een andere goede maar ik weet niet meer waar. Als ik 'm weer vind zal ik het hier plaatsen. [b:a6fade5fc5]Update 17:00 uur;[/b:a6fade5fc5] Aha, deze was het: [url=http://meyerweb.com/eric/thoughts/2012/03/07/negative-proximity/]Negative Proximity[/url]. Weinig voorkomend uitzonderingsgeval, maar goed om je te realiseren. Overigens is het ook zaak om te bedenken dat css-selectors right-to-left worden geëvalueerd, dus hoe minder specifiek je bent, hoe sneller je css geparst wordt. Mocht je een keer een paar uur niets te doen hebben, zoek dan ook eens naar Objectgeörienteerd CSS ([url=http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/]OOCSS[/url]), ook een hele interessante benaderingswijze van CSS inrichten. Als laatste tip (maar dit wist je waarschijnlijk al): gebruik een preprocessor. Zelf gebruik ik [url=http://www.lesscss.org/]LESS[/url], maar [url=http://sass-lang.com/]Sass/SCSS[/url] moet ook goed zijn. Ze lijken sowieso heel erg op elkaar. - Bas
  • Gooly, had je m'n update al gelezen? Als je zelf nog goede bronnen hebt gevonden dan hoor ik het ook graag! :D - Bas

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.