SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: small css doubt

  1. #1
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    small css doubt

    Hai folks,

    what this mean?

    HTML Code:
    .list_wrapper table th, tr, td {
    }

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,326
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    In CSS you can specify styles that apply to hierarchical elements.
    The style attributes that are included (between the {}) would apply to ANY td, ANY tr, and ALL th that are INSIDE a table which is a descendant of ANY element with the "CLASS" attribute of 'list_wrapper'

    Here is a Sitepoint Reference that explains this well.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ParkinT View Post
    In CSS you can specify styles that apply to hierarchical elements.
    The style attributes that are included (between the {}) would apply to ANY td, ANY tr, and ALL th that are INSIDE a table which is a descendant of ANY element with the "CLASS" attribute of 'list_wrapper'

    Here is a Sitepoint Reference that explains this well.
    Thanks for the quick reply.

  4. #4
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    .list_wrapper{
        background: none repeat scroll 0 0 #1E9ED7;
        border: 2px solid #FFFFFF;
    	-moz-border-radius:8px;
    	-webkit-border-radius: 8px;
    	border-radius: 8px;
        padding: 4px;
    }
    
    .list_wrapper table{
         border-collapse: collapse;
    	 margin:20px;
    	 font-family:Verdana, Arial, Helvetica, sans-serif;
    	 font-size:12px;
    	 text-align:center;
    }
    .list_wrapper table th, tr, td {
        border: 1px solid #BDBDBD;
        color: #fff;
        height: 10px;
        padding: 4px 8px;
    }
    .list_wrapper table th{
        background: #699B20;
    }
    .list_wrapper table td{
      background:#FFFFCD;
      color:#000000;
    }
    now i have a problem. table styles defined above also get applied to other tables / not within elements having .list_wrapper classname

    specially the border, font etc.

  5. #5
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    966
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello i just defined the style as follows and now the problem solved.

    Code:
    .list_wrapper table th,.list_wrapper table tr,.list_wrapper table td {
        border: 1px solid #BDBDBD;
        color: #fff;
        height: 10px;
        padding: 4px 8px;
    }

  6. #6
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,326
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    Great work.

    The lessons best learned are those that come from our self-discovery!!
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by afridy View Post
    Hello i just defined the style as follows and now the problem solved.

    Code:
    .list_wrapper table th,.list_wrapper table tr,.list_wrapper table td {
        border: 1px solid #BDBDBD;
        color: #fff;
        height: 10px;
        padding: 4px 8px;
    }
    Yes a comma separated list of values is just that - a separate list of values. The selectors between the commas have nothing to do with what comes before or after the comma and are just separate rules that will all get the same styles applied.

    Don't worry a lot of people initially make that same mistake


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
  •