Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie CSS question

    I'm very very new to CSS, and am doing my best to figure things out without resorting to message boards, but this has me stumped. I'm dissecting some code from a site I really like, but I can't figure out why the selectors are used
    the way they are. In particular, I can't figure out why "#header nav ul" is defined twice (the first two clauses), and why "#header nav," is written on its own before it's defined. Any help would be hugely appreciated! Here's the code (it's used for the header, obviously):

    #header nav,
    #header nav ul {
    width: 240px;
    float: left;
    }

    #header nav ul {
    margin:0 0 10px;
    }

    #header nav ul li {
    width: 120px;
    height: 32px;
    border-bottom: 1px solid #eaeaea;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: "QuicksandBold", "Helvetica Neue", Arial, Helvetica, sans-serif;
    }

    #header nav ul li a {
    color: #fff;
    display:block;
    height:32px;
    position:relative;
    text-transform:uppercase;
    width:120px;
    font-size: 11px;
    }

    #header nav ul li a span {
    color: #333;
    display:block;
    line-height:12px;
    height: 10px;
    position:relative;
    top:10px;
    width:110px;
    }

  • #2
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I believe, and others can correct me if I'm wrong, it's because these CSS elements (width & float) apply to both #header nav and #header nav ul.

    And I would imagine the formatting is like that due to the default formatting of that designer. I've seen it both ways where it's on separate lines or just separated with a comma.

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    yes, commas separate multiple declarations so
    Code:
    #one, #two, #three{}
    applies to one two and three... they are calling out multiple times varied elements because they are assigning "extra" CSS that was not defined in the prior style section. I personally do not like this method, and Idk if it is good/bad practice to do that way.
    personally I like to define each element one at a time and get it all done with... if there are things that will span multiple ID's then make a class (IMO)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for clarifying this!

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually... I'm still a little confused. As I understand it, the difference between

    #header nav ul { ... }

    ... and ...

    #header nav ul li { ... }

    is that the first declaration applied to the whole list, and the second declaration applies only to list elements and not the whole list? Am I right?

    Thanks for any help you can offer

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by milleplatea00 View Post
    Actually... I'm still a little confused. As I understand it, the difference between

    #header nav ul { ... }

    ... and ...

    #header nav ul li { ... }

    is that the first declaration applied to the whole list, and the second declaration applies only to list elements and not the whole list? Am I right?

    Thanks for any help you can offer
    #header nav ul {} applies style to all ul's that are children of nav which are children of header....
    #header nav ul li {} applies style to all li's that are children of ul that are children of nav that are children of header

    so sorta right, the first applies to ul and the second applies to li; idk but i am pretty sure li would inherit from ul hence the need to target the li

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, that's right. To expand a little, if it helps,

    Code:
    #header nav ul { ... }
    would apply a style to any ul element within a nav element within an element with id of header.

    Code:
    #header nav ul li { ... }
    would apply a style to any li element within a ul element within a nav element within an element with id of header

    EDIT: ah, great minds think alike....

  • #8
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Thanks Thanks!


  •  

    Posting Permissions

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