CSS selector problem

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • motivus
    #1

    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

    Tags: None
    • 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:
              BMT Micro web server error page
              https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173

                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

                                    Previous template Next
                                    Working...