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…

Like it? Share it! These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Google
  • E-mail this story to a friend!
  • Print this article!