Question

<div id="compv-navbar">
  <a href="#"><img src="image1.png" id="icon1"></a> | <a href="#"><img src="image2.png" id="icon2"></a> | <a href="#"><img src="image3.png" id="icon3"></a> |  This is the text I want to select and style specifically.
</div>

I would like to do this in HTML/CSS. No jQuery or Javascript.

Also…I would like to do this without using another <div> tag, because it throws off the presentation.

Edit: For clarification, I can’t apply the style to ‘compv-navbar’ because essentially I would like to ‘enclose’ that specific text. I would like to be able to style it as if it were it’s own div, without the div. If I were to style the entire compv-navbar div, it would do all the pipes (|) and I don’t want that. I just want that specific piece of text to be styled.

Thanks.

Answer 1

Wrap that text in a <span> instead of a <div>, then apply styles to #compv_navbar span instead. <span> is a generic inline element, so it should not throw off your layout.

Here’s an illustration, assuming the pipe separators aren’t part of the text you want to target:

<div id="compv-navbar">
  <a href="#"><img src="image1.png" id="icon1"></a> | 
  <a href="#"><img src="image2.png" id="icon2"></a> | 
  <a href="#"><img src="image3.png" id="icon3"></a> |  
  <span>Text to be styled</span>
</div>

If you want the separators to be styled the same way, perhaps using <span> wouldn’t fit the description of ‘simple’ anymore (wrapping the separators in the same span tags, or whatever), in which case I’d just go with styling #compv_navbar.