SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    london
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slightly confused about grouping css classes and Ids

    I am working on a piece of css code that looks like this

    Code:
    #navigation li.selected a, #navigation li a:hover, #navigation .child-menu li a {
    	background-color: #1E2529;
    	color: #fff;
    }
    
    #navigation li.selected a span {
    	background: url(../images/navigation/bullet_selected.png) no-repeat 0 50%;
    	padding-left: 10px;
    }
    
    #navigation li:hover .child-menu {
    	background: #1E2529;
    	display: block;
    	position: absolute;
    	width: 200px;
    	z-index: 300;
    }
    
    .ie6 #navigation li.hover .child-menu {
    	background: #1E2529;
    	display: block;
    	position: absolute;
    	width: 200px;
    	z-index: 300;
    }
    
    #navigation .child-menu li {
    	border-width: 0 0 1px;
    	display: block;
    	float: none;
    	margin: 0;
    Could someone please explain to me how the grouping actually works. For example in the group shown below

    Code:
    #navigation li.selected a, #navigation li a:hover, #navigation .child-menu li a
    What element is the target? Is it the 'a' as its the innermost child or is it any of the listed elements? is there any differrence with the comman separated ones and the ones separated by a space? If someone can split the above to individual classes i would really appreciate as i would be able to see what it actually means.

    I tried google but could find anything. A link to a tutorial will also help

    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ziggy100;4312325
    [code
    #navigation li.selected a, #navigation li a:hover, #navigation .child-menu li a
    [/code]
    That code is basically teh same as
    Code:
    #navigation li.selected a{}
    #navigation li.selected a:hover{}
    #navigation .child-menu li a{}
    It selects the anchors (at the end of the selector)
    What element is the target? Is it the 'a' as its the innermost child or is it any of the listed elements? is there any differrence with the comman separated ones and the ones separated by a space?
    Explained above. Not any of the listed elements. A comma denotes a new selector entirely dependant on itself.

    If someone can split the above to individual classes i would really appreciate as i would be able to see what it actually means.

    I tried google but could find anything. A link to a tutorial will also help

    Thanks
    Someone else can do that. I'm running late for owrk.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's a way to save file size and editing in more than 1 place where an element has the same properties/values as another.
    Code CSS:
    #navigation li.selected a, 
    #navigation li a:hover, 
    #navigation .child-menu li a 
    {
      background-color: #1E2529;
      color: #fff;
    }
    All have a background of #1e2529 and a text color of #fff.

    They could all be done individually:
    Code CSS:
    #navigation li.selected a
    {
      background-color: #1E2529;
      color: #fff;
    }
    #navigation li a:hover
    {
      background-color: #1E2529;
      color: #fff;
    }
    #navigation .child-menu li a 
    {
      background-color: #1E2529;
      color: #fff;
    }
    Though that would add the properties/values (that are exactly the same) in 3 places, where combining them into one makes more sense.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    london
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So basically if anchors are separated by a space it means the rightmost element is the target? And in most cases it will be an inner child of whatever is on the right?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The last element in a selector, aka "#nav li a{}" will always be the target. The stuff before it is just extra weight to the selector that narrows down the target.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    london
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks guys. That was very helpfull.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad you understood
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •