SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    help - is there a class && selector?

    Hi ... here's a tricky situation that I'm in ... its best explained with an example

    I want to write a rule that will select an element only if it is of class "about-banner" and of class "third" from the following HTML

    <div class="about-banner"></div>
    <div class="third"></div>
    <div class="about-banner third">This is the one I want to select</div>
    <div class="about-banner half"></div>
    <div class="about-banner quarter"></div>

    How do I write it? My instinct would be to write

    .about-banner.third {}

    or

    .about-banner && .third {}

    If its not possible thats cool, just would like to know. Thanks in advance


    edit post:
    I know that I could wrap it in a container
    <div class="about-banners"> ... </div>
    .about-banners .third {}
    but I'm trying to avoid doing so

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by PrimeLens View Post

    How do I write it? My instinct would be to write

    .about-banner.third {}
    Your instincts are correct and the above is the correct way to do it. You just use dot separated classes to concatanate them and you can add as many classes as you need (within reason).

    (IE6 has problems with it but if you don't need to support IE6 then don't worry about it.)

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can also do it with attribute selectors. It works from IE7 onwards.

    Code CSS:
    .banner-about[class*="third"]
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    werd. respec'


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
  •