Tooltje om CSS selector te selecteren?

[HeidiOlstrom]

Hi guys,

Ik zoek een simpel tooltje (ordegrootte van colorcop) waarmee ik door op een element in een website te klikken zijn css selector terug krijg/op het clipboard geplakt krijg. En dan bedoel ik het hele pad, tot en met de eerste unieke identifier, zodat ik zeker weet dat het pad, gebruikt in een stylesheet, daadwerkelijk alle andere relevante styles zal overrulen (sorry voor het gebrekkige jargon).

Ik ben hiernaar op zoek, omdat ik voor een project een site, waar in de loop der jaren 'module' op uitbreiding op module is gebouwd, moet restylen. Het is 1 spaghetti van te veel stylesheets, inline styles en gegenereerde inline styles (evil).

Ik wek al met firebug, developer toolbar en eclipse, maar heb een dergelijke functionaliteit nog niet gevonden. >> heb al wel de selectors weergegeven zien worden, maar de paden zijn vaak zo complex dat ik bij het switchen naar mijn editor de helft al weer kwijt ben... vandaar mijn zoektocht naar iets praktischers...

iemand?

[RobIII]

CTRL-Shift-Y in FireFox met de developer toolbaar; klik dan het element et voila, de bijbehorende CSS
(En dit toont inderdaad het hele pad in een balkje bovenin je browser).

Het hele pad lijkt me redelijk onzinnig; dat staat zelden tot nooit volledig in de CSS

[ Voor 56% gewijzigd door RobIII op 22-02-2008 12:28 ]

[crisp]

Zelfs met het gehele pad weet je niet zeker of dat ook de meest specifieke selector is. Sowieso zijn er meer paden aangezien er verschillende typen selectors zijn, maar een !important op een minder specifieke selector zal hoe dan ook precendence krijgen, net als inline styles of even specifieke rules in een user-stylesheet. En dan heb ik het nog niet eens over media-specifieke stylesheets of media-queries

[HeidiOlstrom]

RobIII schreef op vrijdag 22 februari 2008 @ 12:26:
CTRL-Shift-Y in FireFox met de developer toolbaar; klik dan het element et voila, de bijbehorende CSS

Danks.

Deze kende ik al, inderdaad. Probleem daar is dat de paden vaak zo lang zijn dat ze uit beeld verdwijnen en een optie om het pad te kopieren bestaat niet...

[Dark Blue]

Ik _{heet ook Heidi, wat een toeval} en gebruik de Colorzilla plugin van Firefox. Hij nestelt zich onder in je statusbar en met 1x klikken kun je over al je elementen heen hoveren, hij tekent er dan een rood dotted lijntje omheen en je weet welk element je vasthebt. In de statusbar zet hij vervolgens zo nauwkeurig mogelijk de selector. Voor zover ik weet kan hij ze helaas niet naar het clipboard kopiëren.

Toch blijft het een meesterlijk ding om tijdens het aanpassen van een layout even te spieken aan welk element je nou precies zit te frunniken. Helpt dat je?

[Muta]

firebug is wat je nodig hebt!
https://addons.mozilla.org/en-US/firefox/addon/1843

[El_BingO]

Wat ook kan is Xray

Deze zet je onder je bookmarks (bij voorkeur in je koppelingen balk). Klik hem aan en je kunt alle elementen bij langs!

[ Voor 3% gewijzigd door El_BingO op 25-02-2008 09:29 ]

[HeidiOlstrom]

Muta schreef op zaterdag 23 februari 2008 @ 16:24:
firebug is wat je nodig hebt!
https://addons.mozilla.org/en-US/firefox/addon/1843

Dank je voor je hulp, maar zoals genoemd in de openingspost gebruik ik die al... met Firebug krijg ik het niet voor elkaar een heel pad naar de unieke selector te isoleren en te kopieren naar de clipboard.

[HeidiOlstrom]

Dark Blue schreef op zaterdag 23 februari 2008 @ 12:22:
Ik _{heet ook Heidi, wat een toeval} en gebruik de Colorzilla plugin van Firefox.

Hee Heidi... ik ga hem zo proberen...

Wie weet....

[HeidiOlstrom]

El_BingO schreef op maandag 25 februari 2008 @ 09:28:
Wat ook kan is Xray

Hoi Bingo,

Ook deze zal ik even proberen.

grrrtjs,
Heidi

[curry684]

El_BingO schreef op maandag 25 februari 2008 @ 09:28:
Wat ook kan is Xray

Deze zet je onder je bookmarks (bij voorkeur in je koppelingen balk). Klik hem aan en je kunt alle elementen bij langs!

Geinig ding maar in feite gewoon een zwaar gestripte Firebug? Enige nut wat ik hierin zie is dat ie in IE werkt, maar dat is in deze kwestie niet de vraag.