How to select elements with some text after them?

Question

I use <div> tags to insert icons in my pages:

<div class="icon warning"></div>There is a warning in the page

The problem is that the icons are too close to the text:

Here is the code for the icon:

div.icon{
    display:inline-block;
    width:16px;
    height:16px;
    background-color:transparent;
    background-image:url(/images/icons.png);
    background-repeat:no-repeat;
    vertical-align:text-top;
    background-position:0 0;
}

div.icon.warning{
    background-position:-48px 0;
    cursor:help;
}

I want to place a few pixels distance between the icon and the text only if the icon is being followed by some text. In other words if there is no text after the icon, I don't want that space. In other words for the following code, I want to have 5px distance between div#icon1 and the text "There is a warning in the page" but I don't want any distance between div#icon2 and the elements coming after it:

<li><div id="icon1" class="icon warning"></div>There is a warning in the page</li>

<li><div id="icon2" class="icon warning"></div></li>

Please note that the icons will not always appear within <li> elements so your suggested selectors cannot rely on the context that the icons may appear. The only thing certain about the icons is that if they are followed with some text, there must be some space between them and the text.

Answer 1

If you are willing to restructure your markup a little (without adding any additional size to it):

http://jsfiddle.net/8kcQv/

The key line is:

.icon:empty{ padding-left: 20px; }

This works in IE 9, Chrome, etc. Other browsers will add extra space between empty elements. Here's an alternate version which degrades differently (less space between icon and text) when :empty is not supported:

http://jsfiddle.net/8kcQv/1/

HTML

<div class="icon">This message has text.</div>
<br>
<br>
<div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>

CSS

.icon{
 padding: 4px 4px 4px 32px; /* 32px adds extra space to pad against text */
 height: 24px;
 line-height: 16px;
 font-family: sans-serif;
 font-size: 16px;
 background:url(http://icons.iconarchive.com/icons/pixelmixer/basic/16/warning-icon.png) no-repeat 4px 4px;
 display: inline-block;
}

/* empty matches elements with no children (including text nodes) */
.icon:empty{ padding-left: 20px; } 

Alternatively, you might be able to do without :empty altogether if you use a style like:

.icon{
    padding: 4px 8px 4px 24px;
    ...
}

This places equal distance on both sides of the icon.

Answer 2

You can wrap the text around in a span and apply a padding to it:

<div class="icon warning"></div><span class="warning-text">There is a warning in the page</span>

.warning-text {
  padding-left: 5px;
}

Update: As per the comment below, I decided to change from using span instead of div. It would be possible to use a div, but with the additional display: inline; CSS attribute.

Answer 3

I suggest using addClass jQuery. Add a certain class which will add a space if there is text after it, else don't put any class. You should set the default item with no space at all.