How to select a span inside a span with CSS?


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:

      <ul class="menu">
         <li class="item59">
            <span class="separator">

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

.separator span {

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.

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.

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

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


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

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 {}

.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.