Writing HTML is itself a challenge for developers and writing correct CSS selectors for this HTML is more difficult , sometimes bit confusing too. As myself being a web developer , can understand the pain and thus came out with this plugin.
This jquery plugin helps you to generate the css selectors on a single click. Give it a try , simply paste some HTML below and click Generate.
Comments
Love it !!
Pretty neat and could be really useful – thanks a lot! Prevents spelling mistakes too.
Might be a bit overkill at the same time. Small bug: It generates CSS classes for the tags too
.
Whoops – looks like my comment got edited.
“for the tags” should be “for the SCRIPT tags”
It was interesting to read this article and I hope to read a new article about this subject in your site in the near time.
Thanks, dude. It’s really helpful to choose selector.
very very…useful
Great tools! Thanks
= div..div
Clarifies the concept well
very nice see some cool css3 animation here
http://itshala.com/2010/02/19/css3-45-mind-blowing-animations-believe-me/
Wow that was like a special treasure trove of Oatmeal work! IMMD.
Kind of nice, but there are some optimizations that can be had here.
For instance, I provided some html that gave me the selector:
div#wark ul#listo li.odd dd { }
Because jQuery (and browsers) parse css selectors right-to-left, the abundance of fine detail will actually hurt performance. The fewer the items to parse, the faster the selection will be.
One obvious optimization involves ids. Since they must be unique, having the tagname is unnecessary.
Without knowing the context of the html, one can see that a more optimized selector can be:
#listo li.odd dd { }
But with deeper digging, a profiler may notice that the dd tag is used only in the context of li.odd, making that unnecessary as well.
#listo dd { }
Or that the same contained only one dd tag to begin with, making the most optimized selector just:
dd { }
Don’t get me wrong, it’s a neat plugin, definitely thanks for sharing. But getting the *exact* selector is less important imo than getting the quickest one. If it absolutely must select one element, one could give that elm an id.
WOW! really cool and useful tool. thanks
Yeah. these are really helpful tool.
Thank you for an article. Interesting material is always useful. Thanks again
this is great stuff
thanks for sharing very usefull
great stuff, thanks forsharing this
this tools very…useful
Nice notes to follow on writing websites, thanks for the post.
I found your website perfect for my needs. It contains wonderful posts.
Happy to see your blog as it is just what I’ve looking for and excited to read all the posts.
nice application, nice to share that
I found your website perfect for my needs. It contains wonderful and helpful posts.
wow great tools, very useful
want to explore more css with great design.. I love it.
It was interesting to read this article and I hope to read a new article about this subject in your site in the near time. I found your website perfect for my needs. It contains wonderful and helpful posts.
Yeah. these are really helpful tool…Thanks
great stuff, thanks forsharing this
great design.. I love it.
I like these CSS issues!
nice application, nice to share that
Great post, this is the quality I like to see.I’ll be sharing this with Digg, it’s something that’s gotta be Dugg for sure.I’m thinking this is the best post I’ve read on your blog yet.I’ll be back for sure, excellent stuff.
This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.