This member is having difficulty identifying the specific selector she wants to change using Firebug. We discuss the visual tools Firebug provides for identifying selectors and then talk about strategies for identifying a selector in a complex HTML structure.
No, that’s why I always real cautious. You don’t find out and I’m still a little bit lost with that you know, when you went into Firebug… I never find the element myself. So it’s kind of sometimes confusing why you have to click to find the right stuff.
Have you watched the tutorials on how to use Firebug and Web Developer?
You have? Okay.
Yes and when I come to my page, it doesn’t always show what I’d like to see.
Yes, that’s true because there are potentially lots of things overlapping right? So for example, if you clicked here, it’s not entirely clear what you’re going to see when you do that. And you know, you thought you were clicking in a white space, we’re just bringing you to the h1. However, as long as you have it set so that as you drag over with your mouse, it lights up. That should give you the clue you need to find it. And sometimes, you say to yourself, “Okay well, it should be right here and I can’t seem to find that right here thing.” You know, you may have to expand the one directly above it in order to find you know, the very specific thing you’re trying to adjust, right?
But when you do that, when you click on that, does it show automatically on the white?
Does it show what?
When you do that, does it show… how do you find the… you know, on the white parts of your screen, just next to where you are.
Right here, yeah. What I do is… I just follow this down until I’m actually highlighting the thing I care about. And then if you click on it here then over here on the right hand side, it shows you all of the potential pieces of code that are affecting it.
Yeah, this is where I lost my way. I guess I have to practice more.
So it’s just… for example, right here. In fact, you can see that this image that Jackie has here is actually embedded inside of this strong tag because it’s inside of it nested there. And in fact, it’s embedded inside of the h2. Now so if you were trying to find that image, you get the h2 and you come down to the UL and then you come down to the p and you say, “Oh my gosh, I can’t find that dang image” because that’s not showing up. You just have to you know, you have to do a little bit of investigation, expanding these things and dragging your mouse until the thing highlights. And as soon as you’ve placed your mouse on something… as soon as your mouse crosses the actual element, it will highlight.
Yeah because I never found the footer of the fancy suite so maybe I didn’t have to expand something. I’m going to try to understand, I’ll decide it myself now if possible.
Well, I will just use this as an example you know, you need to sort to pay attention to the hierarchy also. Because here’s the big wrapping div, eStore fancy 3 and then you have an eStore fancy thumb and then an eStore fancy footer, right? And then if you expand the footer, you’ve got the link which is obviously the name of the product and then you’ve got this tag which is the price tag and then you’ve got this object. And each of those things are on the same level but you know, encased inside of this eStore fancy 3 footer. And then you expand the object and you find the form you know, and the input box and then you know, the input button and so on and so forth. But it’s a process of expanding these various levels and then working your way through it to find what you were looking for. Okay?
Okay, sounds good. Yeah this is… it really fixed my problem. Thank you very much.
Okay, you’re absolutely welcome. We’ll talk to you next time.
Okay yeah, sounds good.