How to target everything except a span

I have the following HTML:

<div id="breadcrumb">
  <a href=".">Home</a> &rsaquo; About us 
  <span class="flag">
    <a href="../it/about-us.php" title="Italiano">
      <img src="../images/it.png" alt="Italiano" height="12" width="20">
    </a>
  </span>
</div>

I am trying to “hide” - display:none; - everything BUT the span without adding another span around the breadcrumb itself. If necessary, that’s what I shall have to do, but is there any way to address everything that’s not inside the span?

I have not tried yet, but possibly a css :not() would do the trick.

1 Like

I don’t have anything working yet, I think the problem is the &rsaquo; About us not being contained.

As an aside you can’t nest anchors so you may want to post some valid code first :slight_smile:

Edit: Whoops my mistake I missed the closing tag :frowning:

4 Likes

I thought exactly the same at first, but then spotted it before saying anything.

1 Like

O ye of little faith!

I’ve been trying various things like

#breadcrumb:not(.flag)

and

#breadcrumb :not(.flag)

but as Sam says the problem seems to be there’s no way to target the crumb without a container…

1 Like

Yes, to hide that you must hide #breadcrumb which means everything.
Unless there is some clever trick with display: contents or something like.

1 Like

No you really need a container around that text to target it properly and of course to be a little more semantic as that text is basically an anonymous inline box.

As a trick you could probably get away with this.

#breadcrumb > *{display:none}
#breadcrumb {
	visibility:hidden;
	line-height:0;
	text-indent:-999em;
}
#breadcrumb span{
	visibility:visible;
	display:block;
	text-indent:0;
	line-height:normal;
}

Thanks Paul. Thanks Sam

I think I’ll be more semantic and add a span. It’s only a couple of dozen pages; how long can that take me? :sweat:

In my defence, I wrote the HTML some while ago. :unhappy:

2 Likes

This may be purely academic and I normally would not recommend this path, but seeing as this is “a painted into a corner situation” AND THERE IS NO TEXT in .flag you could try:

#breadcrumb > a {display:none;}
#breadcrumb{ font-size:0; line-height:0;}

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.