How to select a span inside a span with CSS?

HTML & CSS
1

Hello,

I have a problem which I’m not too sure how to solve. It’s a joomla menu and I’m trying to style a span which resides inside a span with a class. Take this code:


<div>
   <h3>Menu</h3>
      <ul class="menu">
         <li class="item59">
            <span class="separator">
               [COLOR="#0000FF"]<span>Catalogue</span>[/COLOR]
            </span>
         </li>
      </ul>
</div>

So I’m trying to style the span which is in blue. I’ve tried the following code:


.separator span {
styles
}

Which in turn, styles both span elements and breaks the look in IE8/9. I need to know how to style just the inside span, which I assume requires a different selection with CSS. With the way the menu works I cannot give the inner span a class as far as I know.

2

Just tried using this:


.separator span:first-child {
background-color: #5C6888;
color: white;
font-size: 0.8em;
margin: 10px 10px 0 10px;
padding: 4px 0 4px 0;
text-align: center;
}

Which works great on the first menu item, but then the rest down further still get styled incorrectly.

3

Update - all good. Turns out for some weird reason the menu had empty spans. Removed these and it’s all sorted.

4

.separator span will only style the innermost span. There may be something else going on here.

Edit:

Aha, I see it’s sorted. :slight_smile:

5

if you wanted to target ALL spans WITHIN any element named .separator
.separator span{}

If you anted to target ONLY DIRECT CHILDREN of .separator that are span ( and dont mind not supporting IE6) I would suggest you use:
.separator>span {}

BTW
.separator span:first-child {} will only target spans in .separators that are the FIRST ELEMENT (not the first of type, as that a different pseudo class ) within their respective container.