CSS selector problem

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • motivus

    CSS selector problem

    Hi all. I'm on a WinXP/IE6 machine...

    If I have the following markup - basically a vertical menu of links and
    sub-links:

    ....
    <body id="tab2">
    ....
    <ul id="site-links">
    <li class="link2">
    <a href="./aaa/index.htm">AAA</a>
    <ul id="sub-links">
    <li class="link2-1">
    <a href="./aaa/sub1.htm">Sub 1</a>
    </li>
    <li class="link2-2">
    <a href="./aaa/sub2.htm">Sub 2</a>
    </li>
    ...
    </ul>
    </li>
    </ul>

    and I want to apply style to the first <A> element - say, bold the link
    - without applying that same style to the other <A> elements - the
    sub-links - within <li class="link2">, why doesn't this...

    body#tab2 li.link2 > a
    {
    font-weight: bold;
    }

    work? Meaning, I realize this should bold all the links that are
    children of li.link2 - which is not what I want. But it doesn't even do
    that. What's wrong? And then, how do I just bold the first link and not
    the sub-links?

    Thanks,
    motivus

  • Bjoern Hoehrmann

    #2
    Re: CSS selector problem

    * motivus wrote in comp.infosystem s.www.authoring.stylesheets:[color=blue]
    >Hi all. I'm on a WinXP/IE6 machine...[/color]
    [color=blue]
    >why doesn't this...
    >
    >body#tab2 li.link2 > a
    >{
    > font-weight: bold;
    >}
    >
    >work?[/color]

    IE6 does not support the child combinator.
    --
    Björn Höhrmann · mailto:bjoern@h oehrmann.de · http://bjoern.hoehrmann.de
    Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
    68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/

    Comment

    • motivus

      #3
      Re: CSS selector problem

      Ok. Just investigated. I see...

      Either way, anyone know how I can bold just the first <A> element in
      that nested <LI> construct?

      motivus

      Comment

      • Lauri Raittila

        #4
        Re: CSS selector problem

        in comp.infosystem s.www.authoring.stylesheets, motivus wrote:[color=blue]
        > Ok. Just investigated. I see...
        >
        > Either way, anyone know how I can bold just the first <A> element in
        > that nested <LI> construct?[/color]

        :first-child

        IE don't support that either.

        li a {stuff:do}
        li a a {stuff:undo;}

        (learn to quote, please)


        --
        Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
        Utrecht, NL.
        Support me, buy Opera:

        Comment

        • motivus

          #5
          Re: CSS selector problem


          Lauri Raittila wrote:[color=blue][color=green]
          > > Either way, anyone know how I can bold just the first <A> element[/color][/color]
          in[color=blue][color=green]
          > > that nested <LI> construct?[/color]
          >
          > :first-child
          >
          > IE don't support that either.
          >
          > li a {stuff:do}
          > li a a {stuff:undo;}
          >[/color]

          Thanks. Of course I was trying to avoid that. But c'est la vie.
          [color=blue]
          > (learn to quote, please)
          >[/color]

          I'm concerned about Usenet's bandwidth and storage demands.

          Comment

          • motivus

            #6
            Re: CSS selector problem

            Ok. I "resolved" that last issue (thanks Lauri!). Now I have a new one.
            Again, I'm on a WinXP/IE6 machine...

            And again, I'm basically creating a vertical menu of links and
            sub-links. The problem is that my style for the first <LI> is being
            applied to the second <UL>, which is NOT nested. Here's the markup and
            the CSS (modified from earlier!):

            ....
            <body id="tab2">
            ....
            <ul id="site-links">
            <li id="link1">... </li>
            <li id="link2">
            <a href="./bbb/index.htm">BBB</a>
            </li>
            <ul class="sub-links">
            <li id="link2-1">
            <a href="./aaa/sub1.htm">Sub 1</a>
            </li>
            <li id="link2-2">
            <a href="./aaa/sub2.htm">Sub 2</a>
            </li>
            </ul>
            <li id="link3">... </li>
            <li id="link4">... </li>
            </ul>

            What I want is a highlighted box to wrap around the first <LI> element,
            which contains a link:

            body#tab2 li#link2
            {
            background-color: #fff;
            border: 1px solid #6c6;
            margin: 0;
            padding: .5em 0 .5em 1em;
            }

            The problem is that this box also wraps around the ul.sub-links
            element! I can't figure out why as it is no longer nested within the
            first <UL>'s <LI> element.

            Any ideas on why this is happening? It doesn't appear that 'body#tab2
            li#link2' should reference 'body#tab2 ul.sub-links'

            Thanks,
            motivus

            Comment

            • motivus

              #7
              Re: CSS selector problem


              motivus wrote:[color=blue]
              > ...
              > <body id="tab2">
              > ...
              > <ul id="site-links">
              > <li id="link1">... </li>
              > <li id="link2">
              > <a href="./bbb/index.htm">BBB</a>
              > </li>
              > <ul class="sub-links">
              > <li id="link2-1">
              > <a href="./aaa/sub1.htm">Sub 1</a>
              > </li>
              > <li id="link2-2">
              > <a href="./aaa/sub2.htm">Sub 2</a>
              > </li>
              > </ul>
              > <li id="link3">... </li>
              > <li id="link4">... </li>
              > </ul>[/color]

              Hmm. I'm looking at this and realizing my markup is probably illegal.
              It looks like I've got to nest ul.sub-links within ul#site-links. The
              question is, how do I prevent the 'body#tab2 li#link2' style from being
              applied to ul.sub-links??

              motivus

              Comment

              • Lauri Raittila

                #8
                Re: CSS selector problem

                in comp.infosystem s.www.authoring.stylesheets, motivus wrote:
                [color=blue]
                > The problem is that my style for the first <LI> is being
                > applied to the second <UL>, which is NOT nested.[/color]

                [code snipped]

                URL?


                --
                Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
                Utrecht, NL.
                Support me, buy Opera:
                https://secure.bmtmicro .com/opera/buy-opera.html?AID= 882173

                Comment

                • motivus

                  #9
                  Re: CSS selector problem


                  Lauri Raittila wrote:[color=blue]
                  > [code snipped]
                  >
                  > URL?
                  >[/color]

                  Unfortunately, I don't have a URL at this time. I'm prototyping on a
                  corporate intranet.

                  Comment

                  Working...