SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to select a span inside a span with CSS?

    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:

    Code:
    <div>
       <h3>Menu</h3>
          <ul class="menu">
             <li class="item59">
                <span class="separator">
                   <span>Catalogue</span>
                </span>
             </li>
          </ul>
    </div>
    So I'm trying to style the span which is in blue. I've tried the following code:

    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. #2
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried using this:

    Code:
    .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. #3
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update - all good. Turns out for some weird reason the menu had empty spans. Removed these and it's all sorted.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    .separator span will only style the innermost span. There may be something else going on here.

    Edit:

    Aha, I see it's sorted.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,815
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •