[nick2price]

Hi guys, cant work this one out, seems strange what I am doing has no effect. I have the following html

<div class="ft-lnk-top1">
	<a class="footerLinkOne" href="#" target="_self" title="Contact">Contact</a><span>&nbsp;|&nbsp;</span>
        <a class="footerLinkTwo" href="#" target="_self" title="Join">Join</a><span>&nbsp;|&nbsp;</span>
</div>

I have other links in there aswell, just deleted them to keep it shorter. Basically, in one of my media queiries, I want to remove these two links. So I have done:

.ft-lnk-top1 .footerLinkOne, .ft-lnk-top1 .footerLinkTwo {
	display:none;
}

Which removes them. However, it still leaves the spans which contain the |. So to remove this, I have tried adding

.ft-lnk-top1 .footerLinkOne span, .ft-lnk-top1 .footerLinkTwo span

That doesnt seem to work. Am I missing something here?

Cheers

This post has been edited by nick2price: 31 August 2012 - 02:37 AM

[RudiVisser]

Yes, the selector .ft-lnk-top1 .footerLinkOne span is basically saying, any span element within an element of any type with the class footerLinkOne within an element of any type with the class ft-lnk-top1.

You would need to place the span inside the a if you wanted that query to work.

If, however, you're always going to be removing both spans, you could simply use the selector .ft-lnk-top1 span, but I guess there's a good reason as to why you're not doing that. In that case, it might be worth making another class, or slapping footerLinkOne class onto the span. If you have actual styling for footerLinkOne, restrict it to the a element (ie. with the selector a.footerLinkOne), thus leaving your spans with that class untouched.

Of course, another solution would be to simply wrap up your 2 elements in a parent element, and hide that instead of the individual elements. However since this is so easily solved with CSS it's probably best to not flood your code with more elements.

This post has been edited by RudiVisser: 31 August 2012 - 02:57 AM

[nick2price]

For some strange reason, I never even considered adding a class to the spans. I needed to only target them two spans, which is why I couldnt target all spans. Adding a class has done the trick, thanks for the advise.

Nick

[e_i_pi]

RudiVisser has already answered this, and you seem to have found the solution yourself as well, but I'd point out here that proper indentation is something that could have come to the rescue pretty quickly

<div class="ft-lnk-top1">
	<a class="footerLinkOne" href="#" target="_self" title="Contact">Contact</a>
	<span>&nbsp;|&nbsp;</span>
	<a class="footerLinkTwo" href="#" target="_self" title="Join">Join</a>
	<span>&nbsp;|&nbsp;</span>
</div>

It is now clear that the span elements are children of the div with class ft-lnk-top1, which allows you to debug your CSS selectors more easily.