I am making a modification to an existing stylesheet. Initially, I had 

.formlayout p.otheropts {
	clear: left;
	padding-left: 120px;
	margin-left: 10%;
}

.formlayout p.otheropts strong {
	color: #cc6402;
             font-weight: bold;
}

But it appears that the font should be bold in all instances. Rather than slapping <strong> tags around everything, I was going to modify the base style to include the font-weight. However, that would mean setting <strong> would only change the color of the font, not the weight itself. That doesn’t seem semantically correct! I think I am going to change <strong> to <em> because I believe that’s more semantically correct. (Sure, that could be debated). However, now I need to find where I’ve used <strong> tags within the otheropts class.. a global search for <strong> will bring up lots of false positives.

So.. here is my idea, and perhaps something that navigates through the DOM tree would do it. A tool that enables you to set the context you’re searching in. As follows:

Insert context: (in this case, otheropts)
Insert specific tag:

Then set something up to getElementsByClassName, grab all instances of otheropts for the entire site, then… hmm, does getElementsByTagName retrieve <strong>? I have no idea.. something to check out…

So that’s my rough idea. I’m sure there’s already something out there someplace…

Enjoy this post? Forward it to a friend or submit it to a social bookmarking site so others can read it as well. These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • TwitThis
  • Facebook
  • Mixx
  • Reddit
  • del.icio.us
  • Sphinn
  • Google
  • E-mail this story to a friend!