Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.

Adjacent sibling selectors hack

Wednesday March 9, 2005

Whilst playing with adjacent sibling selectors today I stumbled across something that appears to hide chunks of CSS from Internet Explorer 5, 5.5 and 6 on PC.

I don't know whether it is of any real use but I quite like the fact that 'adjacent sibling selectors' abbreviates nicely to form the word ass. It will be even more appropriate if I have got this all wrong and it doesn't really work on further testing, so I am covered on all sides!

Anyway here is the example, and here is the CSS:

  1. #wrap,
  2. ass + hack{
  3. /* IE5 Mac commented backslash hack \*/
  4. width:730px;
  5. /* Recover from IE5 Mac commented backslash */
  6. }

For this to work across all versions of IE you must place the 'ass + hack' selectors very last on the list, IE5 will not play along otherwise. It can also be any words you like, for example, foo + foo, but I guess it's best not to use any actual HTML tags. I also added the IE5/Mac commented backslash hack to the code just to finish the job off.

If anyone finds any flaws with any browsers, please let me know and yes, you can call me an ass if you do!

  1. Craig

    1578 days ago

    I’m a big fan of the ”!important” hack. All version of IE don’t use it so you can beat their meat on the toilet seat:

    height: auto !important;
    height: 100%;

    Smack!

    You like that IE? That’s right biiiatch.

  2. Rob Mientjes

    1578 days ago

    However, Craig, !important has its (no, not a pun!) importance. It has real relevance and real needs, so this is a first-degree hack. No fan of those. I just use * html, and if it doesn’t work, fuck it. It should work ;)

    Nice find, John.

  3. Craig

    1578 days ago

    Rob, * html has its relevance and needs as well. The only difference is that !important doesn’t require you to declare multiple cases. It saves you code, file size, and read/editability.

    I used to use * html back in the olden days. Then I realized that it was way too difficult to make changes to my complicated designs and huge websites.

    You say tomato, I say tomato

  4. Craig

    1578 days ago

    John, can you show me an example when IE picks it up? I’ve been building sites since 1992 and I’ve never come across an instance where IE used !important.

  5. Craig

    1578 days ago

    That doesn’t make any sense. If it did fully support !important’s functionality it wouldn’t read the second declaration.

    I guess he’s saying because it still applies the attribute even if it has the !important, then that means it supports it.

    I would argue that it doesn’t. As long as you put the IE attribute after the !important one, you are safe… just like I stated above. Here’s a better explanation.

    Cool… good discussion.

  6. Rob Mientjes

    1578 days ago

    Craig, just to keep on nagging: !important has real meanings. It’s like abusing SPAN to have IRed headers. There are other, cleaner ways to do it.

    You say tomato, I say potato.

    PS: John, you done cute boy.

  7. Craig

    1578 days ago

    Rob, I guess I don’t understand what you are trying to say. I’m using !important exactly how it was engineered to be used.

    So you are saying:

    rule {
    attribute: asdf;
    }

    * html rule {
    attribute: asdf;
    }

    is cleaner than:

    rule {
    attribute: asdf !important;
    attribute: asdf1;
    }

    I don’t think so. But that’s just my opinion. You say pikachu, I say pukachi.

    Sorry to take away from your wonderful find John. I’m out.

    Oxton rules!

  8. Rob Mientjes

    1578 days ago

    Off or not, still saying it.

    It’s not just about how it looks. CSS hacks are CSS hacks, however I don’t like them when they actually have a real ‘semantic’ value, which * html hasn’t. !important wasn’t engineered to mislead IE.

    But yes, Oxton does quite well.

  9. Anton

    1578 days ago

    HAH!!!!
    ∗laughs at John’s last comment∗

    Now THERE’S a solition I like!

  10. Anton

    1578 days ago

    solition???
    dammit.

  11. Jon Hicks

    1578 days ago

    John, don’t listen to those boys. Your hack has a cool name, which beats both of them into a cocked hat.

  12. Mark J

    1578 days ago

    I’ve always used child selectors to hide from IE:

    thing {
    ie sees this
    }

    html > body thing {
    hidden from ie
    }

  13. Egor Kloos

    1576 days ago

    Yeah, the sibling hack is pretty cool. Well, actually it not so much of a hack in my book. It’s more of a not fully supported selector.

    Just like these:

    head+body div.wrapper

    div[class=wrapper]

    html>body div.wrapper

    And so the list could go on for a bit. IE7 looks like it’s going to support some of these selector types. Fingers crossed.

    Anyway… the ASS technique also sounds pretty risque. I’m going for that one ;)

Christmas gifts?

Beginning CSS Web Development book cover

Recently

The last seven posts made on this site.

Geeky shiteMeta

A proud member