SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div id selector not limiting css

    I am definitely new to all this, but I study hard and learn quickly. Thanks to all for any help you can offer. I'm always impressed by the community that surrounds this kind of work. I have noticed this problem in two different instances when I am adding pages and css to an existing site. I have created divs with an id selector, and styled the <a> tags within them. For an example, I have added a page with the following code:

    <div id="section_links"><h2>Click each section title to view pictures</h2>
    <ul>
    <li><a href="#" onclick="showSection(1)" >title1</a></li>
    <li><a href="#" onclick="showSection(2)" >tile2</a></li>
    <li><a href="#" onclick="showSection(3)" >title3</a></li>
    <li><a href="#" onclick="showSection(4)" >title4</a></li>
    </ul>
    </div>

    I wrote the css as follows:

    #section_links ul li a, a:visited {
    font-size: 14px;
    color: #003366;
    font-weight:bold;
    f0text-decoration: none;
    }

    My problem is now I see the effects of this css in other places, such as the main nav menu that is under the id of #navbar. When I use Firebug to inspect the element, I get the following, even on a page were my code <div id="section_links"> doesn't occur:


    Shouldn't the #section_links selector limit the range of the css rules? Thanks again for any help.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,834
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You are applying the rules to two different combinations separated by the comma

    #section_links ul li a

    and

    a:visited
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would the proper reference be
    #section_links ul li a, #section_links ul li a:visited {} ?

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I tried the selectors as in my previous post, and my problem is solved.

    Thanks be to all those who know what they are doing. I hope to get there some day.


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
  •