Capture a literal in css

Question

Hi, I have several NAV Bars. Each NAV Bar is of the pattern;

a | a

such that where the literal "|" occurs, it's always has a sibling a on the left.

where a is an html anchor element and "|" is a literal separator of interest.

What css can I use to capture that literal "|"? The idea is that I want to set it display:None for print media.

Thanks for any help.

Answer 1

You need hooks to select anything with CSS. If the "|" characters aren't marked up in some way, you can't select them. Put them in span elements, or, better yet, replace them with background images, and define your navigation as a real list.

Answer 2

CSS selects html elements. | is not an html element, it's a text node, you can't access it. However, you can probably use background images on the anchors instead, and make them the divider. That or wrap spans around the divider and target them.

<span class="divider">|</span>

or

#nav a { background:url(/images/divider.gif) no-repeat top left; }
#nav li.last a { background-image:none; }

I didn't mention borders because they would rely on the height of the element being applied to and assumed you wanted more control, more customized but you could of course use those.

Answer 3

Yeah, you'd have to surround them, with say a span element. Then give those spans a class of "pipe" or something. Then use the CSS class "pipe" to set the display to none for printing.

Answer 4

You could position the parent element outside but the a elements inside the viewport. Something like this:

div {
    position: relative;
    top: -10em;
}
div a {
    position: relative;
    top: 10em;
}

But you should better use a list for your navigation and format that:

<ul id="nav">
    <li><a href="…">first</a></li>
    <li><a href="…">second</a></li>
    <li><a href="…">third</a></li>
</ul>

#nav, #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
}

Answer 5

My recommendation would be to use an unordered list

<ul class="myNav">
   <li><a>My Nav</a>
   <li class="last"><a>Another nav</a>
</ul>

And then float the list items left, and then put a border on one side of each list item. Now the CSS below isn't exact, but it gives the general idea

.myNav li {float:left;border-right:1px solid black;}
.myNav li.last {border-right:0}

That should look similar, and be 100% css for seperators.

Answer 6

If you just need a simple text divider, using the content property is a fast, semantic way to achieve this.

<div id="nav">
     <a href="#">Nav1</a>
     <a href="#">Nav2</a>
</div>

#nav a + a:before { content: '|'; }

Note that content and adjacent sibling selectors (the + in the selector above) don't work in older browsers like IE6, but since this is just a divider, it shouldn't be a huge concern.

Edit: Note that this will make the | appear inside the link, so you should use a list instead (that is also the correct way to mark this up anyway).