SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    first, last child and jquery

    Hello!

    I'm trying to style a table and I was going to use "first-child" and "last-child" to style portions of my table in specific ways.

    For example:

    <html>
    .special td:first-child {
    border-left: 1px solid #000;
    }

    .special tr:first-child td:last-child {
    border-top: 1px solid #000;
    }</html>

    This is my first experience using these CSS selectors, and after a cursory search online, it seems that there are some browser related issues. Is there a jQuery solution that would work, regardless of the browser?

    Thank you,

    Eric

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You can use the above selectors in jQuery without any issue, instead of using an inline style for instance you could simply create a CSS class and append it to the elements you need. See the below example:

    CSS
    Code CSS:
    .special-td-first { border-left: 1px solid #000; }
    .special-td-last  { border-top: 1px solid #000; }

    jQuery
    Code JavaScript:
    $('.special td:first').addClass('special-td-first');
    $('.special tr:first td:last').addClass('special-td-last');

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply!

    It makes total sense.



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
  •