Results 1 to 3 of 3

Thread: need help with children selectors

  1. #1
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default need help with children selectors

    Code:
    .productBorder {
    background: url("http://www.distributorcentral.com/websites/ImperialScottSpecialtiesdiscounts/preview/images/imperial-logo-ribbon.png") no-repeat scroll left bottom #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    margin: 5px;
    text-align: center;
    }
    I want to change this per catalog guide.
    like all children of categories get different image
    for the .product border


    my website is a little different than others,see fire bug

    what I really wanted was different corner ribbons/icons for the children
    of the catalogs/ titles, So customer would know what section they were in but don't know how to do it.


    I'll settle for changing productborder per children of categories/titles

    Have any idea how to do either of these?

    Even better would to put a label ribbon icon on just the products I like in each of the categories.

    My website is http://www.distributorcentral.com/we...tiesdiscounts/
    Last edited by Beverleyh; 07-20-2013 at 08:07 AM. Reason: Formatting fixed and broken link removed

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,026
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I'm a bit confused by your statement -
    my website is a little different than others,see fire bug
    Why is it different? And why did you feel like you needed to mention it?

    Anyway, back to your question. The obvious suggestion would be to create a new class with different styles (put it after the parent CSS in your stylesheet);
    Code:
    .productBorderChild {
    background: url("http://www.distributorcentral.com/websites/ImperialScottSpecialtiesdiscounts/preview/images/imperial-logo-ribbon-child.png") no-repeat scroll left bottom #FFFFFF;
    border: 1px solid red;
    }
    And then apply that class to the elements that need it;
    Code:
    <div class="productBorderChild">
    This would require you to manually edit the markup but if you wanted to automate it with CSS, you could use the child selector to apply the new styles to "the child of .productBorder" - something like;
    Code:
    .productBorder > div
    More info on child selectors here: http://css-tricks.com/child-and-sibling-selectors/

    However, I searched on your markup and couldnt find anything with the "productBorder" class, so I don't know what you're applying it to or what you're calling "children".

    You mentioned "children of categories/titles", but likewise, I searched on those terms and couldn't find any elements with those classes either. But, with your page having around 1600 lines of markup, and using many nested tables, its very hard to make sense of things.

    I don't know if this has answered your questions, but if it hasn't, please try to provide more information and make sure that classes/elements you're asking questions about actually exist in your markup. I know you have provided the page link, but really, that could be ANY page because I cant relate it to your questions. Or was the broken link that you posted (that I deleted) for the page with "productBorder" class/elements?

    It would also help if you could provide a slimmed-down page with just a few dozen lines - 1600 is much too overwhelming for outsiders to digest.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank Bev,
    I maybe back I soon .

Similar Threads

  1. navigation a selectors
    By RDLyTN in forum HTML
    Replies: 0
    Last Post: 11-16-2011, 10:47 AM
  2. How to use 2 ID CSS selectors in a rule
    By sniperman in forum CSS
    Replies: 1
    Last Post: 08-18-2011, 02:48 PM
  3. Simple HTML DOM can't get children
    By tixrus in forum PHP
    Replies: 2
    Last Post: 02-16-2010, 12:22 PM
  4. Resolved Need help with advanced CSS selectors
    By C55inator in forum CSS
    Replies: 2
    Last Post: 06-29-2009, 06:04 PM
  5. non inherited selectors
    By altein in forum CSS
    Replies: 1
    Last Post: 02-18-2008, 02:07 PM

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
  •