Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 23
  1. #1
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Using CSS wizardry such as pseudoclasses and attribute selectors, is it possible to apply CSS to the first <td> tag that appears within any given <tr> tag?

    i.e.,
    Code:
    <style type="text/css">
    thead /* and...? */
    {
        color:red;
    }
    </style>
    
    <table>
    <tr>
    <td class="thead"><!-- only time thead would actually be applied --></td>
    <td class="thead"><!-- not applied --></td>
    <td class="thead"><!-- not applied --></td>
    </tr>
    </table>
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    i don't think so... unless you create a class for it

    Code:
    <style type="text/css">
    thead /* and...? */
    {
        color:red;
    }
    
    thead.first
    {
        color: #090;
    }
    </style>
    
    <table>
    <tr>
    <td class="thead first"><!-- only time thead would actually be applied --></td>
    <td class="thead"><!-- not applied --></td>
    <td class="thead"><!-- not applied --></td>
    </tr>
    </table>
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    I'm reading a CSS book and have seen a strange selector, the adjacent selector:
    Code:
    tr + td.thead {
    blahblah
    }
    This will cause that all td with thead as class that are adjacent to a tr in the code to apply the style.
    Try and tell if it works

  5. #4
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    That should work, I just found out about that a while ago... VERY useful when formatting paragraphs. p + p allows you to indent every paragraph past the first one. much like Blue Robot does.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  6. #5
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    I'm going to use this selector a lot from now on, it seems very useful.

  7. #6
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Yes adjcent selectors is the best way of doing this short of assigning a class/id to the td. I had forgotten about them. I was goign to come up with a solution involving javascript. However you dont need to assign a class to the td. The slector (tr + td) will be sufficient.


  8. #7
    Member macgruder's Avatar
    Join Date
    Apr 2004
    Location
    Japan
    Posts
    97
    Member #
    5524
    Originally posted by filburt1
    Using CSS wizardry such as pseudoclasses and attribute selectors, is it possible to apply CSS to the first <td> tag that appears within any given <tr> tag?

    i.e.,
    Code:
    <style type="text/css">
    thead /* and...? */
    {
        color:red;
    }
    </style>
    
    <table>
    <tr>
    <td class="thead"><!-- only time thead would actually be applied --></td>
    <td class="thead"><!-- not applied --></td>
    <td class="thead"><!-- not applied --></td>
    </tr>
    </table>

    Not really an answer to your question but perhaps you don't need to use the <td class = 'thead'>, but rather the <th> tag.

    Then you can refer to this with
    th{


    }

    There also seems to be a typo in the above code. You would need
    .thead
    {

    }
    in your css.

  9. #8
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Changing the HTML is not an option in this instance, unfortunately.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  10. #9
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    You don't have to change the HTML if you use the adjacent selector:
    Code:
    tr + td.thead {
    blahblah
    }

  11. #10
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    I'm probably doing it wrong:
    Code:
    tr + td.thead
    {
        background-image:url('customimages/subcatbg.gif') !important;
        background-repeat:no-repeat;
        background-position:center left;
        padding-left:19px !important;
    }
    .
    .
    .
    .thead
    {
    	background-color: #79B2D2;
    	color: white;
    	font: bold x-small verdana, tahoma, arial, sans-serif;
    	border-bottom:1px solid #A6C1D2;
    	border-collapse:collapse;
    	padding:3px;
    	white-space:nowrap;
    }
    The first cell still looks like the others.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

css apply only to first column

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:50 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com